hide dough tag for now

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

packages/codemirror/block_utilities.mjs

@@ -0,0 +1,51 @@
+// 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

@@ -13,18 +13,18 @@ import {
 } from '@codemirror/view';
 import { persistentAtom } from '@nanostores/persistent';
 import { logger, registerControl, repl } from '@strudel/core';
-import { cleanupDraw, Drawer } from '@strudel/draw';
-
+import { cleanupDraw, cleanupDrawContext, 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 { sliderPlugin, updateSliderWidgets } from './slider.mjs';
+import { jumpToCharacter } from './labelJump.mjs';
+import { getSliderWidgets, sliderPlugin, updateSliderWidgets } from './slider.mjs';
 import { activateTheme, initTheme, theme } from './themes.mjs';
 import { isTooltipEnabled } from './tooltip.mjs';
-import { updateWidgets, widgetPlugin } from './widget.mjs';
-import { jumpToCharacter } from './labelJump.mjs';
+import { getActiveWidgets, updateWidgets, widgetPlugin } from './widget.mjs';
 
 export { toggleBlockComment, toggleBlockCommentByLine, toggleComment, toggleLineComment } from '@codemirror/commands';
 
@@ -64,6 +64,7 @@ export const defaultSettings = {
   isLineWrappingEnabled: false,
   isTabIndentationEnabled: false,
   isMultiCursorEnabled: false,
+  isBlockBasedEvalEnabled: false,
   theme: 'strudelTheme',
   fontFamily: 'monospace',
   fontSize: 18,
@@ -75,7 +76,7 @@ export const codemirrorSettings = persistentAtom('codemirror-settings', defaultS
 });
 
 // https://codemirror.net/docs/guide/
-export function initEditor({ initialCode = '', onChange, onEvaluate, onStop, root, mondo }) {
+export function initEditor({ initialCode = '', onChange, onEvaluate, onStop, root, mondo, strudelMirror }) {
   const settings = codemirrorSettings.get();
   const initialSettings = Object.keys(compartments).map((key) =>
     compartments[key].of(extensions[key](parseBooleans(settings[key]))),
@@ -105,11 +106,26 @@ export function initEditor({ initialCode = '', onChange, onEvaluate, onStop, roo
         keymap.of([
           {
             key: 'Ctrl-Enter',
-            run: () => onEvaluate?.(),
+            run: () => {
+              // issue with referencing settings, this works more reliably
+              if (strudelMirror?.isBlockBasedEvalEnabled) {
+                evalBlock(strudelMirror);
+                return true;
+              } else {
+                return onEvaluate?.();
+              }
+            },
           },
           {
             key: 'Alt-Enter',
-            run: () => onEvaluate?.(),
+            run: () => {
+              if (strudelMirror?.isBlockBasedEvalEnabled) {
+                evalBlock(strudelMirror);
+                return true;
+              } else {
+                return onEvaluate?.();
+              }
+            },
           },
           {
             key: 'Ctrl-.',
@@ -171,6 +187,7 @@ 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));
@@ -201,20 +218,28 @@ export class StrudelMirror {
           cleanupDraw(true, id);
         }
       },
-      beforeEval: async () => {
-        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);
+        }
         await this.prebaked;
         await replOptions?.beforeEval?.();
       },
       afterEval: (options) => {
         // remember for when highlighting is toggled on
-        this.miniLocations = options.meta?.miniLocations;
+        this.miniLocations = options.meta?.miniLocations || [];
         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');
-        updateWidgets(this.editor, widgets);
-        updateMiniLocations(this.editor, this.miniLocations);
+        // 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);
         replOptions?.afterEval?.(options);
         // if no painters are set (.onPaint was not called), then we only need
         // the present moment (for highlighting)
@@ -222,8 +247,14 @@ 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,
@@ -236,7 +267,9 @@ 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';
@@ -306,8 +339,9 @@ export class StrudelMirror {
     this.flash();
     await this.repl.evaluate(this.code, autostart);
   }
+
   async stop() {
-    this.repl.scheduler.stop();
+    this.repl.stop();
   }
 
   // Listen for global stop requests (e.g., from Vim :q)
@@ -326,8 +360,8 @@ export class StrudelMirror {
       this.evaluate();
     }
   }
-  flash(ms) {
-    flash(this.editor, ms);
+  flash(ms, range) {
+    flash(this.editor, ms, range);
   }
   highlight(haps, time) {
     highlightMiniLocations(this.editor, time, haps);
@@ -359,6 +393,10 @@ export class StrudelMirror {
   setLineWrappingEnabled(enabled) {
     this.reconfigureExtension('isLineWrappingEnabled', enabled);
   }
+
+  setBlockBasedEvalEnabled(enabled) {
+    this.reconfigureExtension('isBlockBasedEvalEnabled', enabled);
+  }
   setBracketMatchingEnabled(enabled) {
     this.reconfigureExtension('isBracketMatchingEnabled', enabled);
   }
@@ -380,6 +418,10 @@ 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);
   }
@@ -401,6 +443,16 @@ export class StrudelMirror {
     };
     this.editor.dispatch({ changes });
   }
+  // 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);

packages/codemirror/flash.mjs

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

packages/codemirror/highlight.mjs

@@ -3,8 +3,9 @@ import { Decoration, EditorView } from '@codemirror/view';
 
 export const setMiniLocations = StateEffect.define();
 export const showMiniLocations = StateEffect.define();
-export const updateMiniLocations = (view, locations) => {
-  view.dispatch({ effects: setMiniLocations.of(locations) });
+export const displayMiniLocations = StateEffect.define();
+export const updateMiniLocations = (view, locations, range = null) => {
+  view.dispatch({ effects: setMiniLocations.of({ locations, range }) });
 };
 export const highlightMiniLocations = (view, atTime, haps) => {
   view.dispatch({ effects: showMiniLocations.of({ atTime, haps }) });
@@ -21,23 +22,54 @@ const miniLocations = StateField.define({
 
     for (let e of tr.effects) {
       if (e.is(setMiniLocations)) {
-        // 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: 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
-          );
+        //block-based eval case
+        if (e.value.range) {
+          const stateMiniLocations = getMiniLocationsFromDecorations(locations);
 
-        locations = Decoration.set(marks, true); // -> DecorationSet === RangeSet<Decoration>
+          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 }) =>
+              Decoration.mark({
+                id,
+                attributes: { style: `background-color: #00CA2880` },
+              }).range(from, to),
+            );
+
+          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>
+        }
       }
     }
 
@@ -75,12 +107,83 @@ const visibleMiniLocations = StateField.define({
   },
 });
 
-// // Derive the set of decorations from the miniLocations and visibleLocations
-const miniLocationHighlights = EditorView.decorations.compute([miniLocations, visibleMiniLocations], (state) => {
-  const iterator = state.field(miniLocations).iter();
-  const { haps } = state.field(visibleMiniLocations);
-  const builder = new RangeSetBuilder();
+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 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,
@@ -89,50 +192,48 @@ const miniLocationHighlights = EditorView.decorations.compute([miniLocations, vi
         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 },
-        }),
-      );
-    }
-
+    miniLocationsArray.push({
+      from,
+      to,
+      id,
+    });
     iterator.next();
   }
+  return miniLocationsArray;
+};
 
-  return builder.finish();
-});
+export const getMiniLocations = (state) => {
+  const decorations = state.field(miniLocations);
+  return getMiniLocationsFromDecorations(decorations);
+};
 
-export const highlightExtension = [miniLocations, visibleMiniLocations, miniLocationHighlights];
+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 isPatternHighlightingEnabled = (on, config) => {
-  on &&
-    config &&
-    setTimeout(() => {
-      updateMiniLocations(config.editor, config.miniLocations);
-    }, 100);
-  return on ? Prec.highest(highlightExtension) : [];
+  // 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);
 };

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) {
+  constructor(value, min, max, from, to, step, view, id) {
     super();
     this.value = value;
     this.min = min;
@@ -16,10 +16,21 @@ 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() {
-    return false;
+  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
+    );
   }
 
   toDOM() {
@@ -38,6 +49,7 @@ 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) => {
@@ -49,7 +61,7 @@ export class SliderWidget extends WidgetType {
       slider.originalValue = insert;
       slider.value = insert;
       this.view.dispatch({ changes: change });
-      const id = getSliderID(slider.originalFrom); // matches id generated in transpiler
+      const id = slider.id; // Use range-based ID
       window.postMessage({ type: 'cm-slider', value: Number(next), id });
     });
     return wrap;
@@ -62,19 +74,60 @@ export class SliderWidget extends WidgetType {
 
 export const setSliderWidgets = StateEffect.define();
 
-export const updateSliderWidgets = (view, widgets) => {
-  view.dispatch({ effects: setSliderWidgets.of(widgets) });
+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) });
+  }
 };
 
 function getSliders(widgetConfigs, view) {
-  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 */);
-    });
+  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;
 }
 
 export const sliderPlugin = ViewPlugin.fromClass(
@@ -101,7 +154,42 @@ export const sliderPlugin = ViewPlugin.fromClass(
           }
         }
         for (let e of tr.effects) {
-          if (e.is(setSliderWidgets)) {
+          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)) {
             this.decorations = Decoration.set(getSliders(e.value, update.view));
           }
         }
@@ -132,6 +220,7 @@ 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) => {
@@ -140,7 +229,7 @@ if (typeof window !== 'undefined') {
         // update state when slider is moved
         sliderValues[e.data.id] = e.data.value;
       } else {
-        console.warn(`slider with id "${e.data.id}" is not registered. Only ${Object.keys(sliderValues)}`);
+        console.error(`slider with id "${e.data.id}" is not registered. Only ${Object.keys(sliderValues)}`);
       }
     }
   });

packages/codemirror/widget.mjs

@@ -1,55 +1,111 @@
 import { StateEffect, StateField } from '@codemirror/state';
-import { Decoration, EditorView, WidgetType } from '@codemirror/view';
+import { Decoration, EditorView, WidgetType, ViewPlugin } from '@codemirror/view';
 import { getWidgetID, registerWidgetType } from '@strudel/transpiler';
 import { Pattern } from '@strudel/core';
 
-export const addWidget = StateEffect.define({
-  map: ({ from, to }, change) => {
-    return { from: change.mapPos(from), to: change.mapPos(to) };
-  },
-});
+export const setWidgets = StateEffect.define();
 
-export const updateWidgets = (view, widgets) => {
-  view.dispatch({ effects: addWidget.of(widgets) });
+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) });
+  }
 };
 
-function getWidgets(widgetConfigs) {
-  return (
-    widgetConfigs
-      // codemirror throws an error if we don't sort
-      .sort((a, b) => a.to - b.to)
-      .map((widgetConfig) => {
+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 {
         return Decoration.widget({
-          widget: new BlockWidget(widgetConfig),
+          widget: new BlockWidget(widgetConfig, view),
           side: 0,
-          block: true,
-        }).range(widgetConfig.to);
-      })
-  );
+        }).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
 }
 
-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),
-            });
-          } catch (error) {
-            console.log('err', error);
+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();
           }
         }
-      }
-      return widgets;
-    },
-    provide: (f) => EditorView.decorations.from(f),
+        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,
+                  });
+                }
+              }
+            });
+
+            // 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));
+          }
+        }
+      });
+    }
+  },
+  {
+    decorations: (v) => v.decorations,
   },
 );
 
@@ -60,24 +116,116 @@ export function setWidget(id, el) {
 }
 
 export class BlockWidget extends WidgetType {
-  constructor(widgetConfig) {
+  constructor(widgetConfig, view) {
     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() {
-    return true;
+
+  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
+    );
   }
+
   toDOM() {
-    const id = getWidgetID(this.widgetConfig);
-    const el = widgetElements[id];
-    return el;
+    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;
   }
+
   ignoreEvent(e) {
     return true;
   }
 }
 
-export const widgetPlugin = [widgetField];
+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;
+}
 
 // widget implementer API to create a new widget type
 export function registerWidget(type, fn) {

packages/core/controls.mjs

@@ -98,10 +98,10 @@ export function registerMultiControl(names, maxControls, ...aliases) {
  * Select a sound / sample by name. When using mininotation, you can also optionally supply 'n' and 'gain' parameters
  * separated by ':'.
  *
- * @name s
- * @tags superdough, samples
+ * @name sound
+ * @tags samples, superdough, dough
  * @param {string | Pattern} sound The sound / pattern of sounds to pick
- * @synonyms sound
+ * @synonyms s
  * @example
  * s("bd hh")
  * @example
@@ -387,7 +387,7 @@ export const { source, src } = registerControl('source', 'src');
  *  - for voicings, it picks the voice index
  *
  * @name n
- * @tags superdough, samples, tonal
+ * @tags samples, tonal, superdough, dough
  * @param {number | Pattern} value sample index starting from 0
  * @example
  * s("bd sd [~ bd] sd,hh*6").n("<0 1>")
@@ -406,7 +406,7 @@ export const { n } = registerControl('n');
  * You can also use midi numbers instead of note names, where 69 is mapped to A4 440Hz in 12EDO.
  *
  * @name note
- * @tags tonal
+ * @tags tonal, superdough, dough
  * @example
  * note("c a f e")
  * @example
@@ -434,7 +434,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, supradough, dough
  * @synonyms vel
  * @example
  * s("hh*8")
@@ -446,7 +446,7 @@ export const { velocity, vel } = registerControl('velocity', 'vel');
  * Controls the gain by an exponential amount.
  *
  * @name gain
- * @tags amplitude, superdough, supradough
+ * @tags amplitude, superdough, supradough, dough
  * @param {number | Pattern} amount gain.
  * @example
  * s("hh*8").gain(".4!2 1 .4!2 1 .4 1").fast(2)
@@ -457,7 +457,7 @@ export const { gain } = registerControl('gain');
  * Gain applied after all effects have been processed.
  *
  * @name postgain
- * @tags amplitude, superdough, supradough
+ * @tags amplitude, superdough, supradough, dough
  * @example
  * s("bd sd [~ bd] sd,hh*8")
  * .compressor("-20:20:10:.002:.02").postgain(1.5)
@@ -487,7 +487,7 @@ export const { amp } = registerControl('amp');
  * any of the 8 individual FMs (e.g. `fmh2`)
  *
  * @name fmh
- * @tags fm, superdough, supradough
+ * @tags fm, superdough, supradough, dough
  * @param {number | Pattern} harmonicity
  * @example
  * note("c e g b g e")
@@ -507,8 +507,8 @@ export const { fmh, fmh1, fmh2, fmh3, fmh4, fmh5, fmh6, fmh7, fmh8 } = registerM
  * each other with matrix commands like `fm13`, which would send `fm1` back into
  * `fm3`
  *
- * @name fmi
- * @tags fm, superdough, supradough
+ * @name fm
+ * @tags fmi, superdough, supradough, dough
  * @param {number | Pattern} brightness modulation index
  * @synonyms fm
  * @example
@@ -532,8 +532,9 @@ 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, supradough, dough
  * @param {number | Pattern} type lin | exp
+ * @synonyms fme
  * @example
  * note("c e g b g e")
  * .fm(4)
@@ -543,9 +544,10 @@ export const { fmi, fmi1, fmi2, fmi3, fmi4, fmi5, fmi6, fmi7, fmi8, fm, fm1, fm2
  * ._scope()
  *
  */
-export const { fmenv, fmenv1, fmenv2, fmenv3, fmenv4, fmenv5, fmenv6, fmenv7, fmenv8 } = registerMultiControl(
+export const { fmenv, fmenv1, fmenv2, fmenv3, fmenv4, fmenv5, fmenv6, fmenv7, fmenv8, fme } = registerMultiControl(
   'fmenv',
   8,
+  'fme',
 );
 
 /**
@@ -555,7 +557,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, supradough, dough
  * @synonyms fmatt
  * @param {number | Pattern} time attack time
  * @example
@@ -613,9 +615,10 @@ 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, supradough, dough
  * @synonyms fmdec
  * @param {number | Pattern} time decay time
+ * @synonyms fmdec
  * @example
  * note("c e g b g e")
  * .fm(4)
@@ -652,9 +655,10 @@ export const {
  * any of the 8 individual FMs (e.g. `fmsus7`)
  *
  * @name fmsustain
- * @tags fm, envelope, superdough, supradough
+ * @tags fm, envelope, superdough, supradough, dough
  * @synonyms fmsus
  * @param {number | Pattern} level sustain level
+ * @synonyms fmsus
  * @example
  * note("c e g b g e")
  * .fm(4)
@@ -691,7 +695,7 @@ export const {
  * any of the 8 individual FMs (e.g. `fmrel8`)
  *
  * @name fmrelease
- * @tags fm, envelope, superdough, supradough
+ * @tags fm, envelope, superdough, supradough, dough
  * @synonyms fmrel
  * @param {number | Pattern} time release time
  *
@@ -744,7 +748,7 @@ export const { bank } = registerControl('bank');
  * mix control for the chorus effect
  *
  * @name chorus
- * @tags pitch
+ * @tags pitch, supradough, superdirt
  * @param {string | Pattern} chorus mix amount between 0 and 1
  * @example
  * note("d d a# a").s("sawtooth").chorus(.5)
@@ -761,7 +765,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, supradough, dough
  * @param {number | Pattern} attack time in seconds.
  * @synonyms att
  * @example
@@ -775,7 +779,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, supradough, dough
  * @param {number | Pattern} time decay time in seconds
  * @synonyms dec
  * @example
@@ -787,7 +791,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, supradough, dough
  * @param {number | Pattern} gain sustain level between 0 and 1
  * @synonyms sus
  * @example
@@ -799,7 +803,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, supradough, dough
  * @param {number | Pattern} time release time in seconds
  * @synonyms rel
  * @example
@@ -841,7 +845,7 @@ export const { bandq, bpq } = registerControl('bandq', 'bpq');
  * A pattern of numbers from 0 to 1. Skips the beginning of each sample, e.g. `0.25` to cut off the first quarter from each sample.
  *
  * @name begin
- * @tags samples
+ * @tags samples, superdough, dough
  * @param {number | Pattern} amount between 0 and 1, where 1 is the length of the sample
  * @example
  * samples({ rave: 'rave/AREUREADY.wav' }, 'github:tidalcycles/dirt-samples')
@@ -854,7 +858,7 @@ export const { begin } = registerControl('begin');
  *
  * @memberof Pattern
  * @name end
- * @tags samples
+ * @tags samples, superdough, dough
  * @param {number | Pattern} length 1 = whole sample, .5 = half sample, .25 = quarter sample etc..
  * @example
  * s("bd*2,oh*4").end("<.1 .2 .5 1>").fast(2)
@@ -867,7 +871,7 @@ export const { end } = registerControl('end');
  * To change the loop region, use loopBegin / loopEnd.
  *
  * @name loop
- * @tags samples
+ * @tags samples, superdough
  * @param {number | Pattern} on If 1, the sample is looped
  * @example
  * s("casio").loop(1)
@@ -880,7 +884,7 @@ export const { loop } = registerControl('loop');
  * Note: Samples starting with wt_ will automatically loop! (wt = wavetable)
  *
  * @name loopBegin
- * @tags samples
+ * @tags samples, superdough
  * @param {number | Pattern} time between 0 and 1, where 1 is the length of the sample
  * @synonyms loopb
  * @example
@@ -894,7 +898,7 @@ export const { loopBegin, loopb } = registerControl('loopBegin', 'loopb');
  * Note that the loop point must be inbetween `begin` and `end`, and after `loopBegin`!
  *
  * @name loopEnd
- * @tags samples
+ * @tags samples, superdough
  * @param {number | Pattern} time between 0 and 1, where 1 is the length of the sample
  * @synonyms loope
  * @example
@@ -906,7 +910,7 @@ export const { loopEnd, loope } = registerControl('loopEnd', 'loope');
  * Bit crusher effect.
  *
  * @name crush
- * @tags superdough, supradough
+ * @tags superdough, supradough, dough
  * @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>")
@@ -918,7 +922,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, supradough, dough
  * @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>")
@@ -1093,7 +1097,7 @@ export const { duckonset } = registerControl('duckonset', 'duckons');
  *
  * @name duckattack
  * @tags amplitude, envelope, orbit, superdough
- * @synonyms duckatt
+ * @synonyms duckatt, datt
  *
  * @param {number | Pattern} time The attack time in seconds
  * @example
@@ -1105,13 +1109,13 @@ export const { duckonset } = registerControl('duckonset', 'duckons');
  * ducker: s("bd:4!4").beat("0,4,8,11,14",16).duckorbit("2:5").duckattack("0.4:0.1")
  *
  */
-export const { duckattack } = registerControl('duckattack', 'duckatt');
+export const { duckattack } = registerControl('duckattack', 'duckatt', 'datt');
 
 /**
  * Create byte beats with custom expressions
  *
  * @name byteBeatExpression
- * @synonyms bbexpr
+ * @synonyms bbexpr, bb
  * @tags superdough
  *
  * @param {number | Pattern} byteBeatExpression bitwise expression for creating bytebeat
@@ -1119,7 +1123,7 @@ export const { duckattack } = registerControl('duckattack', 'duckatt');
  * s("bytebeat").bbexpr('t*(t>>15^t>>66)')
  *
  */
-export const { byteBeatExpression, bbexpr } = registerControl('byteBeatExpression', 'bbexpr');
+export const { byteBeatExpression, bbexpr } = registerControl('byteBeatExpression', 'bbexpr', 'bb');
 
 /**
  * Create byte beats with custom expressions
@@ -1153,7 +1157,7 @@ export const { channels, ch } = registerControl('channels', 'ch');
  * Controls the pulsewidth of the pulse oscillator
  *
  * @name pw
- * @tags superdough
+ * @tags superdough, dough
  * @param {number | Pattern} pulsewidth
  * @example
  * note("{f a c e}%16").s("pulse").pw(".8:1:.2")
@@ -1166,6 +1170,7 @@ export const { pw } = registerControl(['pw', 'pwrate', 'pwsweep']);
  * Controls the lfo rate for the pulsewidth of the pulse oscillator
  *
  * @name pwrate
+ * @synonyms pwr
  * @tags superdough, lfo
  * @param {number | Pattern} rate
  * @example
@@ -1173,25 +1178,26 @@ export const { pw } = registerControl(['pw', 'pwrate', 'pwsweep']);
 
  *
  */
-export const { pwrate } = registerControl('pwrate');
+export const { pwrate } = registerControl('pwrate', 'pwr');
 
 /**
  * Controls the lfo sweep for the pulsewidth of the pulse oscillator
  *
  * @name pwsweep
+ * @synonyms pws
  * @tags superdough, lfo
  * @param {number | Pattern} sweep
  * @example
  * n(run(8)).scale("D:pentatonic").s("pulse").pw("0.5").pwrate("<5 .1 25>").pwsweep("<0.3 .8>")
  *
  */
-export const { pwsweep } = registerControl('pwsweep');
+export const { pwsweep } = registerControl('pwsweep', 'pws');
 
 /**
  * Phaser audio effect that approximates popular guitar pedals.
  *
  * @name phaser
- * @tags superdough
+ * @tags superdough, dough
  * @synonyms ph
  * @param {number | Pattern} speed speed of modulation
  * @example
@@ -1209,7 +1215,7 @@ export const { phaserrate, ph, phaser } = registerControl(
  * The frequency sweep range of the lfo for the phaser effect. Defaults to 2000
  *
  * @name phasersweep
- * @tags superdough, lfo
+ * @tags lfo, superdough, dough
  * @synonyms phs
  * @param {number | Pattern} phasersweep most useful values are between 0 and 4000
  * @example
@@ -1223,7 +1229,7 @@ export const { phasersweep, phs } = registerControl('phasersweep', 'phs');
  * The center frequency of the phaser in HZ. Defaults to 1000
  *
  * @name phasercenter
- * @tags superdough
+ * @tags superdough, dough
  * @synonyms phc
  * @param {number | Pattern} centerfrequency in HZ
  * @example
@@ -1238,7 +1244,7 @@ export const { phasercenter, phc } = registerControl('phasercenter', 'phc');
  * The amount the signal is affected by the phaser effect. Defaults to 0.75
  *
  * @name phaserdepth
- * @tags superdough, superdirt
+ * @tags superdough, superdirt, dough
  * @synonyms phd, phasdp
  * @param {number | Pattern} depth number between 0 and 1
  * @example
@@ -1275,7 +1281,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, supradough, dough
  * @param {number | Pattern} frequency audible between 0 and 20000
  * @synonyms cutoff, ctf, lp
  * @example
@@ -1289,7 +1295,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, supradough, dough
  * @param {number | Pattern} modulation depth of the lowpass filter envelope between 0 and _n_
  * @synonyms lpe
  * @example
@@ -1303,7 +1309,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, supradough, dough
  * @param {number | Pattern} modulation depth of the highpass filter envelope between 0 and _n_
  * @synonyms hpe
  * @example
@@ -1317,7 +1323,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, supradough, dough
  * @param {number | Pattern} modulation depth of the bandpass filter envelope between 0 and _n_
  * @synonyms bpe
  * @example
@@ -1331,7 +1337,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, supradough, dough
  * @param {number | Pattern} attack time of the filter envelope
  * @synonyms lpa
  * @example
@@ -1345,7 +1351,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, supradough, dough
  * @param {number | Pattern} attack time of the highpass filter envelope
  * @synonyms hpa
  * @example
@@ -1359,7 +1365,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, supradough, dough
  * @param {number | Pattern} attack time of the bandpass filter envelope
  * @synonyms bpa
  * @example
@@ -1373,7 +1379,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, supradough, dough
  * @param {number | Pattern} decay time of the filter envelope
  * @synonyms lpd
  * @example
@@ -1387,7 +1393,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, supradough, dough
  * @param {number | Pattern} decay time of the highpass filter envelope
  * @synonyms hpd
  * @example
@@ -1402,7 +1408,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, supradough, dough
  * @param {number | Pattern} decay time of the bandpass filter envelope
  * @synonyms bpd
  * @example
@@ -1417,7 +1423,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, supradough, dough
  * @param {number | Pattern} sustain amplitude of the lowpass filter envelope
  * @synonyms lps
  * @example
@@ -1432,7 +1438,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, supradough, dough
  * @param {number | Pattern} sustain amplitude of the highpass filter envelope
  * @synonyms hps
  * @example
@@ -1447,7 +1453,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, supradough, dough
  * @param {number | Pattern} sustain amplitude of the bandpass filter envelope
  * @synonyms bps
  * @example
@@ -1462,7 +1468,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, supradough, dough
  * @param {number | Pattern} release time of the filter envelope
  * @synonyms lpr
  * @example
@@ -1478,7 +1484,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, supradough, dough
  * @param {number | Pattern} release time of the highpass filter envelope
  * @synonyms hpr
  * @example
@@ -1494,7 +1500,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, supradough, dough
  * @param {number | Pattern} release time of the bandpass filter envelope
  * @synonyms bpr
  * @example
@@ -1510,7 +1516,7 @@ export const { bprelease, bpr } = registerControl('bprelease', 'bpr');
 /**
  * Sets the filter type. The ladder filter is more aggressive. More types might be added in the future.
  * @name ftype
- * @tags filter, superdough
+ * @tags filter, superdough, dough
  * @param {number | Pattern} type 12db (0), ladder (1), or 24db (2)
  * @example
  * note("{f g g c d a a#}%8").s("sawtooth").lpenv(4).lpf(500).ftype("<0 1 2>").lpq(1)
@@ -1539,7 +1545,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, supradough, dough
  * @param {number | Pattern} frequency audible between 0 and 20000
  * @synonyms hp, hcutoff
  * @example
@@ -1762,7 +1768,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, supradough, dough
  * @synonyms vibrato, v
  * @param {number | Pattern} frequency of the vibrato in hertz
  * @example
@@ -1790,7 +1796,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, supradough, dough
  * @synonyms vmod
  * @param {number | Pattern} depth of vibrato (in semitones)
  * @example
@@ -1851,7 +1857,7 @@ export const { djf } = registerControl('djf');
  *
  *
  * @name delay
- * @tags orbit, superdough, supradough
+ * @tags orbit, superdough, supradough, dough
  * @param {number | Pattern} level between 0 and 1
  * @example
  * s("bd bd").delay("<0 .25 .5 1>")
@@ -1865,7 +1871,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, supradough, dough
  * @param {number | Pattern} feedback between 0 and 1
  * @synonyms delayfb, dfb
  * @example
@@ -1878,8 +1884,8 @@ export const { delayfeedback, delayfb, dfb } = registerControl('delayfeedback',
  * Sets the level of the signal that is fed back into the delay.
  * Caution: Values >= 1 will result in a signal that gets louder and louder! Don't do it
  *
- * @name delayfeedback
- * @tags orbit, superdough, supradough
+ * @name delayspeed
+ * @tags orbit, supradough
  * @param {number | Pattern} feedback between 0 and 1
  * @synonyms delayfb, dfb
  * @example
@@ -1890,8 +1896,8 @@ export const { delayspeed } = registerControl('delayspeed');
 /**
  * Sets the time of the delay effect.
  *
- * @name delayspeed
- * @tags supradough
+ * @name delaytime
+ * @tags orbit, superdough, supradough, dough
  * @param {number | Pattern} delayspeed controls the pitch of the delay feedback
  * @synonyms delayt, dt
  * @example
@@ -1906,12 +1912,12 @@ export const { delaytime, delayt, dt } = registerControl('delaytime', 'delayt',
  * @name delaysync
  * @tags orbit, superdough
  * @param {number | Pattern} cycles delay length in cycles
- * @synonyms delayt, dt
+ * @synonyms delays, ds
  * @example
  * s("bd bd").delay(.25).delaysync("<1 2 3 5>".div(8))
  *
  */
-export const { delaysync } = registerControl('delaysync');
+export const { delaysync } = registerControl('delaysync', 'delays', 'ds');
 
 /**
  * Specifies whether delaytime is calculated relative to cps.
@@ -1991,7 +1997,7 @@ export const { fadeInTime } = registerControl('fadeInTime');
  * Set frequency of sound.
  *
  * @name freq
- * @tags pitch, superdough
+ * @tags pitch, superdough, dough
  * @param {number | Pattern} frequency in Hz. the audible range is between 20 and 20000 Hz
  * @example
  * freq("220 110 440 110").s("superzow").osc()
@@ -2005,7 +2011,7 @@ export const { freq } = registerControl('freq');
  * Attack time of pitch envelope.
  *
  * @name pattack
- * @tags pitch, envelope, superdough, supradough
+ * @tags pitch, envelope, superdough, supradough, dough
  * @synonyms patt
  * @param {number | Pattern} time time in seconds
  * @example
@@ -2017,7 +2023,7 @@ export const { pattack, patt } = registerControl('pattack', 'patt');
  * Decay time of pitch envelope.
  *
  * @name pdecay
- * @tags pitch, envelope, superdough, supradough
+ * @tags pitch, envelope, superdough, supradough, dough
  * @synonyms pdec
  * @param {number | Pattern} time time in seconds
  * @example
@@ -2031,7 +2037,7 @@ export const { psustain, psus } = registerControl('psustain', 'psus');
  * Release time of pitch envelope
  *
  * @name prelease
- * @tags pitch, envelope, superdough, supradough
+ * @tags pitch, envelope, superdough, supradough, dough
  * @synonyms prel
  * @param {number | Pattern} time time in seconds
  * @example
@@ -2046,7 +2052,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, supradough, dough
  * @param {number | Pattern} semitones change in semitones
  * @example
  * note("c")
@@ -2185,7 +2191,7 @@ export const { octave, oct } = registerControl('octave', 'oct');
  * An `orbit` is a global parameter context for patterns. Patterns with the same orbit will share the same global effects.
  *
  * @name orbit
- * @tags superdough
+ * @tags superdough, dough
  * @synonyms o
  * @param {number | Pattern} number
  * @example
@@ -2227,7 +2233,7 @@ export const { overshape } = registerControl('overshape');
  * Sets position in stereo.
  *
  * @name pan
- * @tags superdough, supradough
+ * @tags superdough, supradough, dough
  * @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>")
@@ -2347,7 +2353,7 @@ export const { mode } = registerControl(['mode', 'anchor']);
  * When using mininotation, you can also optionally add the 'size' parameter, separated by ':'.
  *
  * @name room
- * @tags orbit, superdough
+ * @tags orbit, superdough, dough
  * @param {number | Pattern} level between 0 and 1
  * @example
  * s("bd sd [~ bd] sd").room("<0 .2 .4 .6 .8 1>")
@@ -2478,7 +2484,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, supradough, dough
  * @synonyms dist
  * @param {number | Pattern} distortion amount of distortion to apply
  * @param {number | Pattern} volume linear postgain of the distortion
@@ -2497,7 +2503,7 @@ export const { distort, dist } = registerControl(['distort', 'distortvol', 'dist
  * Postgain for waveshaping distortion.
  *
  * @name distortvol
- * @synonyms distortion, distvol
+ * @synonyms distortion, distvol, superdough, dough
  * @tags superdough, supradough
  * @param {number | Pattern} volume linear postgain of the distortion
  * @example
@@ -2549,7 +2555,7 @@ export const { compressorRelease } = registerControl('compressorRelease');
  * Changes the speed of sample playback, i.e. a cheap way of changing pitch.
  *
  * @name speed
- * @tags pitch, samples
+ * @tags pitch, samples, superdough, dough
  * @param {number | Pattern} speed -inf to inf, negative numbers play the sample backwards.
  * @example
  * s("bd*6").speed("1 2 4 1 -2 -4")
@@ -2563,7 +2569,7 @@ export const { speed } = registerControl('speed');
  * Changes the speed of sample playback, i.e. a cheap way of changing pitch.
  *
  * @name stretch
- * @tags pitch, samples
+ * @tags pitch, samples, superdough
  * @param {number | Pattern} factor -inf to inf, negative numbers play the sample backwards.
  * @example
  * s("gm_flute").stretch("1 2 .5")
@@ -2614,7 +2620,7 @@ export const { squiz } = registerControl('squiz');
  * Formant filter to make things sound like vowels.
  *
  * @name vowel
- * @tags superdough
+ * @tags superdough, superdirt
  * @param {string | Pattern} vowel You can use a e i o u ae aa oe ue y uh un en an on, corresponding to [a] [e] [i] [o] [u] [æ] [ɑ] [ø] [y] [ɯ] [ʌ] [œ̃] [ɛ̃] [ɑ̃] [ɔ̃]. Aliases: aa = å = ɑ, oe = ø = ö, y = ı, ae = æ.
  * @example
  * note("[c2 <eb2 <g2 g1>>]*2").s('sawtooth')
@@ -2702,7 +2708,7 @@ export const { clip, legato } = registerControl('clip', 'legato');
  * Sets the duration of the event in cycles. Similar to clip / legato, it also cuts samples off at the end if they exceed the duration.
  *
  * @name duration
- * @tags superdough
+ * @tags superdough, dough
  * @synonyms dur
  * @param {number | Pattern} seconds >= 0
  * @example
@@ -2745,7 +2751,7 @@ export let createParams = (...names) =>
  * ADSR envelope: Combination of Attack, Decay, Sustain, and Release.
  *
  * @name adsr
- * @tags envelope, amplitude
+ * @tags envelope, amplitude, superdough, dough
  * @param {number | Pattern} time attack time in seconds
  * @param {number | Pattern} time decay time in seconds
  * @param {number | Pattern} gain sustain level (0 to 1)
@@ -2989,7 +2995,7 @@ export const as = register('as', (mapping, pat) => {
  * Allows you to scrub an audio file like a tape loop by passing values that represents the position in the audio file
  * in the optional array syntax ex: "0.5:2", the second value controls the speed of playback
  * @name scrub
- * @tags samples
+ * @tags samples, superdough, dough
  * @memberof Pattern
  * @returns Pattern
  * @example

packages/core/evaluate.mjs

@@ -5,6 +5,34 @@ 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/pick.mjs

@@ -71,29 +71,32 @@ export const pickmod = register('pickmod', function (lookup, pat) {
 /** * pickF lets you use a pattern of numbers to pick which function to apply to another pattern.
  * @tags combiners, functional
  * @param {Pattern} pat
- * @param {Pattern} lookup a pattern of indices
- * @param {function[]} funcs the array of functions from which to pull
+ * @param {Pattern} lookup a pattern of indices or names
+ * @param {function[] | object} lookup the array or lookup object of functions from which to pull
  * @returns {Pattern}
  * @example
  * s("bd [rim hh]").pickF("<0 1 2>", [rev,jux(rev),fast(2)])
  * @example
  * note("<c2 d2>(3,8)").s("square")
  * .pickF("<0 2> 1", [jux(rev), fast(2), x=>x.lpf(800)])
+ * @example
+ * note("<c2 d2>(3,8)").s("square")
+ * .pickF("<jr l> f", { jr:jux(rev), f:fast(2), l:x=>x.lpf(800) })
  */
-export const pickF = register('pickF', function (lookup, funcs, pat) {
-  return pat.apply(pick(lookup, funcs));
+export const pickF = register('pickF', function (pickPattern, lookup, pat) {
+  return pat.apply(pick(lookup, pickPattern));
 });
 
 /** * The same as `pickF`, but if you pick a number greater than the size of the functions list,
  * it wraps around, rather than sticking at the maximum value.
  * @tags combiners
  * @param {Pattern} pat
- * @param {Pattern} lookup a pattern of indices
- * @param {function[]} funcs the array of functions from which to pull
+ * @param {Pattern} lookup a pattern of indices or names
+ * @param {function[] | object} lookup the array or lookup object of functions from which to pull
  * @returns {Pattern}
  */
-export const pickmodF = register('pickmodF', function (lookup, funcs, pat) {
-  return pat.apply(pickmod(lookup, funcs));
+export const pickmodF = register('pickmodF', function (pickPattern, lookup, pat) {
+  return pat.apply(pickmod(lookup, pickPattern));
 });
 
 /** * Similar to `pick`, but it applies an outerJoin instead of an innerJoin.

packages/core/repl.mjs

@@ -38,6 +38,7 @@ export function repl({
     pattern: undefined,
     miniLocations: [],
     widgets: [],
+    sliders: [],
     pending: false,
     started: false,
   };
@@ -79,11 +80,132 @@ 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;
   };
 
@@ -103,7 +225,60 @@ export function repl({
   };
   setTime(() => scheduler.now()); // TODO: refactor?
 
-  const stop = () => scheduler.stop();
+  // 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 start = () => scheduler.start();
   const pause = () => scheduler.pause();
   const toggle = () => scheduler.toggle();
@@ -217,7 +392,7 @@ export function repl({
     });
   };
 
-  const evaluate = async (code, autostart = true, shouldHush = true) => {
+  const evaluate = async (code, autostart = true) => {
     if (!code) {
       throw new Error('no code to evaluate');
     }
@@ -225,59 +400,34 @@ export function repl({
       updateState({ code, pending: true });
       await injectPatternMethods();
       setTime(() => scheduler.now()); // TODO: refactor?
-      await beforeEval?.({ code });
+      await beforeEval?.({ code, blockBased: false });
       allTransforms = []; // reset all transforms
-      shouldHush && hush();
+
+      codeBlocks = {};
+      hush();
 
       if (mondo) {
         code = `mondolang\`${code}\``;
       }
-      let { pattern, meta } = await _evaluate(code, transpiler, transpilerOptions);
-      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);
-        }
-      }
 
-      if (!isPattern(pattern)) {
-        pattern = silence;
-      }
+      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 });
+
+      afterEval?.({ code, pattern, meta, range: undefined, widgetRemoved: false });
       return pattern;
     } catch (err) {
       logger(`[eval] error: ${err.message}`, 'error');
@@ -286,8 +436,121 @@ export function repl({
       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?
+      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;
+          }
+        }
+      }
+
+      pPatterns = Object.fromEntries(
+        Object.entries(pPatterns).filter(([key]) => {
+          return Object.keys(codeBlocks).includes(key);
+        }),
+      );
+
+      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: options.range, widgetRemoved });
+      return pattern;
+    } catch (err) {
+      logger(`[eval] error: ${err.message}`, 'error');
+      console.error(err);
+      updateState({ evalError: err, pending: false });
+      onEvalError?.(err);
+    }
+  };
+
   const setCode = (code) => updateState({ code });
-  return { scheduler, evaluate, start, stop, pause, setCps, setPattern, setCode, toggle, state };
+  return { scheduler, evaluate, evaluateBlock, start, stop, pause, setCps, setPattern, setCode, toggle, state };
 }
 
 export const getTrigger =

packages/draw/draw.mjs

@@ -78,6 +78,16 @@ 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/transpiler/transpiler.mjs

@@ -19,7 +19,14 @@ export function registerLanguage(type, config) {
 }
 
 export function transpiler(input, options = {}) {
-  const { wrapAsync = false, addReturn = true, emitMiniLocations = true, emitWidgets = true } = options;
+  const {
+    wrapAsync = false,
+    addReturn = true,
+    emitMiniLocations = true,
+    emitWidgets = true,
+    blockBased = false,
+    range = [],
+  } = options;
 
   const comments = [];
   let ast = parse(input, {
@@ -31,6 +38,13 @@ export function transpiler(input, options = {}) {
 
   const miniDisableRanges = findMiniDisableRanges(comments, input.length);
   let miniLocations = [];
+
+  // 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 = [];
+
   const collectMiniLocations = (value, node) => {
     const minilang = languages.get('minilang');
     if (minilang) {
@@ -43,9 +57,28 @@ export function transpiler(input, options = {}) {
     }
   };
   let widgets = [];
+  let sliders = [];
+  let labels = [];
 
   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);
+        }
+      }
       if (isLanguageLiteral(node)) {
         const { name } = node.tag;
         const language = languages.get(name);
@@ -88,22 +121,29 @@ export function transpiler(input, options = {}) {
         return this.replace(miniWithLocation(value, node));
       }
       if (isSliderFunction(node)) {
-        emitWidgets &&
-          widgets.push({
-            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,
-            step: node.arguments[3]?.value,
-            type: 'slider',
-          });
-        return this.replace(sliderWithLocation(node));
+        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,
+          value: node.arguments[0].raw, // don't use value!
+          min: node.arguments[1]?.value ?? 0,
+          max: node.arguments[2]?.value ?? 1,
+          step: node.arguments[3]?.value,
+          type: 'slider',
+        };
+        emitWidgets && widgets.push(sliderConfig);
+        sliders.push(sliderConfig);
+        return this.replace(sliderWithLocation(node, nodeOffset));
       }
       if (isWidgetMethod(node)) {
         const type = node.callee.property.name;
         const index = widgets.filter((w) => w.type === type).length;
         const widgetConfig = {
+          from: node.start,
           to: node.end,
           index,
           type,
@@ -116,8 +156,30 @@ export function transpiler(input, options = {}) {
         return this.replace(withAwait(node));
       }
       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) {
@@ -181,17 +243,33 @@ export function transpiler(input, options = {}) {
 
   let { body } = ast;
 
+  const silenceExpression = {
+    type: 'ExpressionStatement',
+    expression: {
+      type: 'Identifier',
+      name: 'silence',
+    },
+  };
+
   if (!body.length) {
     console.warn('empty body -> fallback to silence');
-    body.push({
-      type: 'ExpressionStatement',
-      expression: {
-        type: 'Identifier',
-        name: 'silence',
-      },
-    });
+    body.push(silenceExpression);
   } else if (!body?.[body.length - 1]?.expression) {
-    throw new Error('unexpected ast format without body expression');
+    // Last statement is not an expression (e.g., VariableDeclaration, FunctionDeclaration)
+    if (blockBased) {
+      // For block-based eval, add silence as the return value when block ends with declaration
+      body.push(silenceExpression);
+    } else {
+      throw new Error('unexpected ast format without body expression');
+    }
+  }
+
+  // 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
@@ -209,7 +287,7 @@ export function transpiler(input, options = {}) {
   if (!emitMiniLocations) {
     return { output };
   }
-  return { output, miniLocations, widgets };
+  return { output, miniLocations, widgets, sliders, labels };
 }
 
 function isKabelCall(node) {
@@ -416,8 +494,14 @@ function isWidgetMethod(node) {
   return node.type === 'CallExpression' && widgetMethods.includes(node.callee.property?.name);
 }
 
-function sliderWithLocation(node) {
-  const id = 'slider_' + node.arguments[0].start; // use loc of first arg for id
+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}`;
+
   // add loc as identifier to first argument
   // the sliderWithID function is assumed to be sliderWithID(id, value, min?, max?)
   node.arguments.unshift({
@@ -432,14 +516,26 @@ function sliderWithLocation(node) {
 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
-  // 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
+  // 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}`;
 }
 
 function widgetWithLocation(node, widgetConfig) {
   const id = getWidgetID(widgetConfig);
+  // Store the unique ID back into the config so it's available for widget management
+  // This is critical for block-based evaluation to match existing widgets with new ones
+  widgetConfig.id = id;
   // add loc as identifier to first argument
   // the sliderWithID function is assumed to be sliderWithID(id, value, min?, max?)
   node.arguments.unshift({
@@ -454,6 +550,10 @@ function isBareSamplesCall(node, parent) {
   return node.type === 'CallExpression' && node.callee.name === 'samples' && parent.type !== 'AwaitExpression';
 }
 
+function isAllCall(node) {
+  return node.type === 'CallExpression' && node.callee.name === 'all';
+}
+
 function withAwait(node) {
   return {
     type: 'AwaitExpression',
@@ -554,6 +654,128 @@ function languageWithLocation(name, value, offset) {
   };
 }
 
+// List of non-inline widgets that need cleanup
+// These are Pattern.prototype methods that create persistent visualizations
+// (should be repalced by a function call producing an actual list of registered widgets)
+const nonInlineWidgets = ['punchcard', 'spiral', 'scope', 'pitchwheel', 'spectrum', 'pianoroll', 'wordfall'];
+
+function isVisualizerCall(node) {
+  if (
+    node.type === 'CallExpression' &&
+    node.callee.type === 'MemberExpression' &&
+    nonInlineWidgets.includes(node.callee.property?.name)
+  ) {
+    return node.callee.property.name;
+  }
+  return null;
+}
+
+function findVisualizerInSubtree(node) {
+  if (!node || typeof node !== 'object') return null;
+
+  // Check if this node is a visualizer call
+  const viz = isVisualizerCall(node);
+  if (viz) return viz;
+
+  // Recursively search children
+  for (const key of Object.keys(node)) {
+    if (key === 'parent') continue; // Skip parent references to avoid cycles
+    const child = node[key];
+    if (Array.isArray(child)) {
+      for (const item of child) {
+        const found = findVisualizerInSubtree(item);
+        if (found) return found;
+      }
+    } else if (child && typeof child === 'object' && child.type) {
+      const found = findVisualizerInSubtree(child);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+
+// Creates AST nodes for: userDefinedKeys.add('name'); strudelScope.name = name; globalThis.name = name;
+// Used in block-based evaluation to persist variables/functions across blocks
+// We add to both strudelScope (for internal lookups) and globalThis (for direct access)
+// We also track the key in userDefinedKeys so clearScope() can remove it later
+function createScopeAssignment(name) {
+  return [
+    // userDefinedKeys.add('name');
+    {
+      type: 'ExpressionStatement',
+      expression: {
+        type: 'CallExpression',
+        callee: {
+          type: 'MemberExpression',
+          object: {
+            type: 'Identifier',
+            name: 'userDefinedKeys',
+          },
+          property: {
+            type: 'Identifier',
+            name: 'add',
+          },
+          computed: false,
+        },
+        arguments: [
+          {
+            type: 'Literal',
+            value: name,
+          },
+        ],
+      },
+    },
+    // strudelScope.name = name;
+    {
+      type: 'ExpressionStatement',
+      expression: {
+        type: 'AssignmentExpression',
+        operator: '=',
+        left: {
+          type: 'MemberExpression',
+          object: {
+            type: 'Identifier',
+            name: 'strudelScope',
+          },
+          property: {
+            type: 'Identifier',
+            name: name,
+          },
+          computed: false,
+        },
+        right: {
+          type: 'Identifier',
+          name: name,
+        },
+      },
+    },
+    // globalThis.name = name;
+    {
+      type: 'ExpressionStatement',
+      expression: {
+        type: 'AssignmentExpression',
+        operator: '=',
+        left: {
+          type: 'MemberExpression',
+          object: {
+            type: 'Identifier',
+            name: 'globalThis',
+          },
+          property: {
+            type: 'Identifier',
+            name: name,
+          },
+          computed: false,
+        },
+        right: {
+          type: 'Identifier',
+          name: name,
+        },
+      },
+    },
+  ];
+}
+
 function findMiniDisableRanges(comments, codeEnd) {
   const ranges = [];
   const stack = []; // used to track on/off pairs

test/__snapshots__/examples.test.mjs.snap

@@ -8823,6 +8823,33 @@ exports[`runs examples > example "pickF" example index 1 1`] = `
 ]
 `;
 
+exports[`runs examples > example "pickF" example index 2 1`] = `
+[
+  "[ 0/1 → 1/8 | note:c2 s:square pan:0 ]",
+  "[ 1/8 → 1/4 | note:c2 s:square pan:1 ]",
+  "[ 3/8 → 1/2 | note:c2 s:square pan:0 ]",
+  "[ 1/2 → 9/16 | note:d2 s:square ]",
+  "[ 11/16 → 3/4 | note:d2 s:square ]",
+  "[ 7/8 → 15/16 | note:d2 s:square ]",
+  "[ 1/1 → 9/8 | note:d2 s:square cutoff:800 ]",
+  "[ 11/8 → 3/2 | note:d2 s:square cutoff:800 ]",
+  "[ 3/2 → 25/16 | note:d2 s:square ]",
+  "[ 27/16 → 7/4 | note:d2 s:square ]",
+  "[ 15/8 → 31/16 | note:d2 s:square ]",
+  "[ 2/1 → 17/8 | note:c2 s:square pan:0 ]",
+  "[ 17/8 → 9/4 | note:c2 s:square pan:1 ]",
+  "[ 19/8 → 5/2 | note:c2 s:square pan:0 ]",
+  "[ 5/2 → 41/16 | note:d2 s:square ]",
+  "[ 43/16 → 11/4 | note:d2 s:square ]",
+  "[ 23/8 → 47/16 | note:d2 s:square ]",
+  "[ 3/1 → 25/8 | note:d2 s:square cutoff:800 ]",
+  "[ 27/8 → 7/2 | note:d2 s:square cutoff:800 ]",
+  "[ 7/2 → 57/16 | note:d2 s:square ]",
+  "[ 59/16 → 15/4 | note:d2 s:square ]",
+  "[ 31/8 → 63/16 | note:d2 s:square ]",
+]
+`;
+
 exports[`runs examples > example "pickmodRestart" example index 0 1`] = `
 [
   "[ 0/1 → 1/4 | note:C3 s:piano ]",

test/examples.test.mjs

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

website/astro.config.mjs

@@ -10,8 +10,11 @@ import bundleAudioWorkletPlugin from 'vite-plugin-bundle-audioworklet';
 import tailwind from '@astrojs/tailwind';
 import AstroPWA from '@vite-pwa/astro';
 
-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
+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 baseNoTrailing = base.endsWith('/') ? base.slice(0, -1) : base;
 
 // this rehype plugin fixes relative links

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

@@ -38,7 +38,7 @@ const availableFunctions = (() => {
 })();
 
 const tagCounts = {};
-const ignoredTags = ['supradough', 'superdirt'];
+const ignoredTags = ['supradough', 'superdirt', 'dough'];
 // const tagOptions = { all: `all (${availableFunctions.length})` };
 const tagOptions = { all: `all` };
 for (const doc of availableFunctions) {

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

@@ -150,6 +150,7 @@ export function SettingsTab({ started }) {
     isMultiCursorEnabled,
     patternAutoStart,
     includePrebakeScriptInShare,
+    isBlockBasedEvalEnabled,
   } = useSettings();
   const shouldAlwaysSync = isUdels();
   const canChangeAudioDevice = AudioContext.prototype.setSinkId != null;
@@ -306,6 +307,11 @@ export function SettingsTab({ 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)}

website/src/repl/useReplContext.jsx

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

website/src/settings.mjs

@@ -33,6 +33,7 @@ export const defaultSettings = {
   isPatternHighlightingEnabled: true,
   isTabIndentationEnabled: false,
   isMultiCursorEnabled: false,
+  isBlockBasedEvalEnabled: false,
   theme: 'strudelTheme',
   fontFamily: 'monospace',
   fontSize: 18,
@@ -89,6 +90,7 @@ 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),