Revert "Merge pull request 'feature/autocomplete-sound-names' (#1564) from drdozer/strudel:feature/autocomplete-sound-names into main"

This reverts commit 98f5a56ef6, reversing
changes made to c727534d29.

.gitignore

@@ -45,20 +45,6 @@ tidal-drum-machines
 webaudiofontdata
 src-tauri/target
 
-
-
-### BEGIN Visual Studio Code ###
-# Blanket, recursive exclude for .vscode directory and files
-.vscode/**/*
-# Unexclude specific files and directories within .vscode
-!.vscode/settings.json
-!.vscode/tasks.json
-!.vscode/launch.json
-!.vscode/extensions.json
-### END Visual Studio Code ###
-
-
-
 # BEGIN JetBrains -> END JetBrains
 
 # for JetBrains IDE users, e.g. WebStorm. Source: https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore

packages/codemirror/autocomplete.mjs

@@ -1,11 +1,6 @@
 import jsdoc from '../../doc.json';
 import { autocompletion } from '@codemirror/autocomplete';
 import { h } from './html';
-//TODO: fix tonal scale import
-// import { Scale } from '@tonaljs/tonal';
-// import { soundMap } from '@strudel/webaudio';
-let soundMap = undefined;
-import { complex } from '@strudel/tonal';
 
 const escapeHtml = (str) => {
   const div = document.createElement('div');
@@ -80,53 +75,6 @@ const isValidDoc = (doc) => {
 const hasExcludedTags = (doc) =>
   ['superdirtOnly', 'noAutocomplete'].some((tag) => doc.tags?.find((t) => t.originalTitle === tag));
 
-export function bankCompletions() {
-  // TODO: FIX IMPORT
-  const soundDict = soundMap?.get() ?? {};
-
-  const banks = new Set();
-  for (const key of Object.keys(soundDict)) {
-    const [bank, suffix] = key.split('_');
-    if (suffix && bank) banks.add(bank);
-  }
-  return Array.from(banks)
-    .sort()
-    .map((name) => ({ label: name, type: 'bank' }));
-}
-
-// Attempt to get all scale names from Tonal TODO: FIX IMPORT
-let scaleCompletions = [];
-// try {
-//   scaleCompletions = (Scale.names ? Scale.names() : []).map((name) => ({ label: name, type: 'scale' }));
-// } catch (e) {
-//   console.warn('[autocomplete] Could not load scale names from Tonal:', e);
-// }
-
-// Valid mode values for voicing
-const modeCompletions = [
-  { label: 'below', type: 'mode' },
-  { label: 'above', type: 'mode' },
-  { label: 'duck', type: 'mode' },
-  { label: 'root', type: 'mode' },
-];
-
-// Valid chord symbols from ireal dictionary plus empty string for major triads
-const chordSymbols = ['', ...Object.keys(complex)].sort();
-const chordSymbolCompletions = chordSymbols.map((symbol) => {
-  if (symbol === '') {
-    return {
-      label: 'major',
-      apply: '',
-      type: 'chord-symbol',
-    };
-  }
-  return {
-    label: symbol,
-    apply: symbol,
-    type: 'chord-symbol',
-  };
-});
-
 export const getSynonymDoc = (doc, synonym) => {
   const synonyms = doc.synonyms || [];
   const docLabel = getDocLabel(doc);
@@ -165,299 +113,19 @@ const jsdocCompletions = (() => {
   return completions;
 })();
 
-// --- Handler functions for each context ---
-const pitchNames = [
-  'C',
-  'C#',
-  'Db',
-  'D',
-  'D#',
-  'Eb',
-  'E',
-  'E#',
-  'Fb',
-  'F',
-  'F#',
-  'Gb',
-  'G',
-  'G#',
-  'Ab',
-  'A',
-  'A#',
-  'Bb',
-  'B',
-  'B#',
-  'Cb',
-];
-
-// Cached regex patterns for scaleHandler
-const SCALE_NO_QUOTES_REGEX = /scale\(\s*$/;
-const SCALE_AFTER_COLON_REGEX = /scale\(\s*['"][^'"]*:[^'"]*$/;
-const SCALE_PRE_COLON_REGEX = /scale\(\s*['"][^'"]*$/;
-const SCALE_PITCH_MATCH_REGEX = /([A-Ga-g][#b]*)?$/;
-const SCALE_SPACES_TO_COLON_REGEX = /\s+/g;
-
-function scaleHandler(context) {
-  // First check for scale context without quotes - block with empty completions
-  let scaleNoQuotesContext = context.matchBefore(SCALE_NO_QUOTES_REGEX);
-  if (scaleNoQuotesContext) {
-    return {
-      from: scaleNoQuotesContext.to,
-      options: [],
-    };
-  }
-
-  // Check for after-colon context first (more specific)
-  let scaleAfterColonContext = context.matchBefore(SCALE_AFTER_COLON_REGEX);
-  if (scaleAfterColonContext) {
-    const text = scaleAfterColonContext.text;
-    const colonIdx = text.lastIndexOf(':');
-    if (colonIdx !== -1) {
-      const fragment = text.slice(colonIdx + 1);
-      const filteredScales = scaleCompletions.filter((s) => s.label.startsWith(fragment));
-      const options = filteredScales.map((s) => ({
-        ...s,
-        apply: s.label.replace(SCALE_SPACES_TO_COLON_REGEX, ':'),
-      }));
-      const from = scaleAfterColonContext.from + colonIdx + 1;
-      return {
-        from,
-        options,
-      };
-    }
-  }
-
-  // Then check for pre-colon context
-  let scalePreColonContext = context.matchBefore(SCALE_PRE_COLON_REGEX);
-  if (scalePreColonContext) {
-    if (!scalePreColonContext.text.includes(':')) {
-      if (context.explicit) {
-        const text = scalePreColonContext.text;
-        const match = text.match(SCALE_PITCH_MATCH_REGEX);
-        const fragment = match ? match[0] : '';
-        const filtered = pitchNames.filter((p) => p.toLowerCase().startsWith(fragment.toLowerCase()));
-        const from = scalePreColonContext.to - fragment.length;
-        const options = filtered.map((p) => ({ label: p, type: 'pitch' }));
-        return { from, options };
-      } else {
-        return { from: scalePreColonContext.to, options: [] };
-      }
-    }
-  }
-  return null;
-}
-
-// Cached regex patterns for soundHandler
-const SOUND_NO_QUOTES_REGEX = /(s|sound)\(\s*$/;
-const SOUND_WITH_QUOTES_REGEX = /(s|sound)\(\s*['"][^'"]*$/;
-const SOUND_FRAGMENT_MATCH_REGEX = /(?:[\s[{(<])([\w]*)$/;
-
-function soundHandler(context) {
-  // First check for sound context without quotes - block with empty completions
-  let soundNoQuotesContext = context.matchBefore(SOUND_NO_QUOTES_REGEX);
-  if (soundNoQuotesContext) {
-    return {
-      from: soundNoQuotesContext.to,
-      options: [],
-    };
-  }
-
-  // Then check for sound context with quotes - provide completions
-  let soundContext = context.matchBefore(SOUND_WITH_QUOTES_REGEX);
-  if (!soundContext) return null;
-
-  const text = soundContext.text;
-  const quoteIdx = Math.max(text.lastIndexOf('"'), text.lastIndexOf("'"));
-  if (quoteIdx === -1) return null;
-  const inside = text.slice(quoteIdx + 1);
-  const fragMatch = inside.match(SOUND_FRAGMENT_MATCH_REGEX);
-  const fragment = fragMatch ? fragMatch[1] : inside;
-  const soundNames = Object.keys(soundMap?.get() ?? {}).sort();
-  const filteredSounds = soundNames.filter((name) => name.includes(fragment));
-  let options = filteredSounds.map((name) => ({ label: name, type: 'sound' }));
-  const from = soundContext.to - fragment.length;
-  return {
-    from,
-    options,
-  };
-}
-
-// Cached regex patterns for bankHandler
-const BANK_NO_QUOTES_REGEX = /bank\(\s*$/;
-const BANK_WITH_QUOTES_REGEX = /bank\(\s*['"][^'"]*$/;
-
-function bankHandler(context) {
-  // First check for bank context without quotes - block with empty completions
-  let bankNoQuotesContext = context.matchBefore(BANK_NO_QUOTES_REGEX);
-  if (bankNoQuotesContext) {
-    return {
-      from: bankNoQuotesContext.to,
-      options: [],
-    };
-  }
-
-  // Then check for bank context with quotes - provide completions
-  let bankMatch = context.matchBefore(BANK_WITH_QUOTES_REGEX);
-  if (!bankMatch) return null;
-
-  const text = bankMatch.text;
-  const quoteIdx = Math.max(text.lastIndexOf('"'), text.lastIndexOf("'"));
-  if (quoteIdx === -1) return null;
-  const inside = text.slice(quoteIdx + 1);
-  const fragment = inside;
-  let banks = bankCompletions();
-  const filteredBanks = banks.filter((b) => b.label.startsWith(fragment));
-  const from = bankMatch.to - fragment.length;
-  return {
-    from,
-    options: filteredBanks,
-  };
-}
-
-// Cached regex patterns for modeHandler
-const MODE_NO_QUOTES_REGEX = /mode\(\s*$/;
-const MODE_AFTER_COLON_REGEX = /mode\(\s*['"][^'"]*:[^'"]*$/;
-const MODE_PRE_COLON_REGEX = /mode\(\s*['"][^'"]*$/;
-const MODE_FRAGMENT_MATCH_REGEX = /(?:[\s[{(<])([\w:]*)$/;
-
-function modeHandler(context) {
-  // First check for mode context without quotes - block with empty completions
-  let modeNoQuotesContext = context.matchBefore(MODE_NO_QUOTES_REGEX);
-  if (modeNoQuotesContext) {
-    return {
-      from: modeNoQuotesContext.to,
-      options: [],
-    };
-  }
-
-  // Check for after-colon context first (more specific)
-  let modeAfterColonContext = context.matchBefore(MODE_AFTER_COLON_REGEX);
-  if (modeAfterColonContext) {
-    const text = modeAfterColonContext.text;
-    const colonIdx = text.lastIndexOf(':');
-    if (colonIdx !== -1) {
-      const fragment = text.slice(colonIdx + 1);
-      // For anchor after colon, we can suggest pitch names
-      const filtered = pitchNames.filter((p) => p.toLowerCase().startsWith(fragment.toLowerCase()));
-      const options = filtered.map((p) => ({ label: p, type: 'pitch' }));
-      const from = modeAfterColonContext.from + colonIdx + 1;
-      return {
-        from,
-        options,
-      };
-    }
-  }
-
-  // Then check for pre-colon context
-  let modeContext = context.matchBefore(MODE_PRE_COLON_REGEX);
-  if (!modeContext) return null;
-
-  const text = modeContext.text;
-  const quoteIdx = Math.max(text.lastIndexOf('"'), text.lastIndexOf("'"));
-  if (quoteIdx === -1) return null;
-  const inside = text.slice(quoteIdx + 1);
-  const fragMatch = inside.match(MODE_FRAGMENT_MATCH_REGEX);
-  const fragment = fragMatch ? fragMatch[1] : inside;
-  const filteredModes = modeCompletions.filter((m) => m.label.startsWith(fragment));
-  const from = modeContext.to - fragment.length;
-  return {
-    from,
-    options: filteredModes,
-  };
-}
-
-// Cached regex patterns for chordHandler
-const CHORD_NO_QUOTES_REGEX = /chord\(\s*$/;
-const CHORD_WITH_QUOTES_REGEX = /chord\(\s*['"][^'"]*$/;
-const CHORD_FRAGMENT_MATCH_REGEX = /(?:[\s[{(<])([\w#b+^:-]*)$/;
-
-function chordHandler(context) {
-  // First check for chord context without quotes - block with empty completions
-  let chordNoQuotesContext = context.matchBefore(CHORD_NO_QUOTES_REGEX);
-  if (chordNoQuotesContext) {
-    return {
-      from: chordNoQuotesContext.to,
-      options: [],
-    };
-  }
-
-  // Then check for chord context with quotes - provide completions
-  let chordContext = context.matchBefore(CHORD_WITH_QUOTES_REGEX);
-  if (!chordContext) return null;
-
-  const text = chordContext.text;
-  const quoteIdx = Math.max(text.lastIndexOf('"'), text.lastIndexOf("'"));
-  if (quoteIdx === -1) return null;
-  const inside = text.slice(quoteIdx + 1);
-
-  // Use same fragment matching as sound/mode for expressions like "<G Am>"
-  const fragMatch = inside.match(CHORD_FRAGMENT_MATCH_REGEX);
-  const fragment = fragMatch ? fragMatch[1] : inside;
-
-  // Check if fragment contains any pitch name at start (for root + symbol)
-  let rootMatch = null;
-  let symbolFragment = fragment;
-  for (const pitch of pitchNames) {
-    if (fragment.toLowerCase().startsWith(pitch.toLowerCase())) {
-      rootMatch = pitch;
-      symbolFragment = fragment.slice(pitch.length);
-      break;
-    }
-  }
-
-  if (rootMatch) {
-    // We have a root, now complete chord symbols
-    const filteredSymbols = chordSymbolCompletions.filter((s) =>
-      s.label.toLowerCase().startsWith(symbolFragment.toLowerCase()),
-    );
-
-    // Create completions that replace the entire chord, not just the symbol part
-    const options = filteredSymbols;
-
-    const from = chordContext.to - symbolFragment.length;
-    return { from, options };
-  } else {
-    // No root yet, complete with pitch names
-    const filteredPitches = pitchNames.filter((p) => p.toLowerCase().startsWith(fragment.toLowerCase()));
-    const options = filteredPitches.map((p) => ({ label: p, type: 'pitch' }));
-    const from = chordContext.to - fragment.length;
-    return { from, options };
-  }
-}
-
-// Cached regex patterns for fallbackHandler
-const FALLBACK_WORD_REGEX = /\w*/;
-
-function fallbackHandler(context) {
-  const word = context.matchBefore(FALLBACK_WORD_REGEX);
-  if (word && word.from === word.to && !context.explicit) return null;
-  if (word) {
-    return {
-      from: word.from,
-      options: jsdocCompletions,
-    };
-  }
-  return null;
-}
-
-const handlers = [
-  soundHandler,
-  bankHandler,
-  chordHandler,
-  scaleHandler,
-  modeHandler,
-  // this handler *must* be last
-  fallbackHandler,
-];
-
 export const strudelAutocomplete = (context) => {
-  for (const handler of handlers) {
-    const result = handler(context);
-    if (result) {
-      return result;
-    }
-  }
-  return null;
+  const word = context.matchBefore(/\w*/);
+  if (word.from === word.to && !context.explicit) return null;
+
+  return {
+    from: word.from,
+    options: jsdocCompletions,
+    /*     options: [
+      { label: 'match', type: 'keyword' },
+      { label: 'hello', type: 'variable', info: '(World)' },
+      { label: 'magic', type: 'text', apply: '⠁⭒*.✩.*⭒⠁', detail: 'macro' },
+    ], */
+  };
 };
 
 export const isAutoCompletionEnabled = (enabled) =>

packages/codemirror/codemirror.mjs

@@ -1,5 +1,5 @@
 import { closeBrackets } from '@codemirror/autocomplete';
-import { indentWithTab } from '@codemirror/commands';
+import { indentWithTab, toggleLineComment } from '@codemirror/commands';
 import { javascript, javascriptLanguage } from '@codemirror/lang-javascript';
 import { bracketMatching, defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
 import { Compartment, EditorState, Prec } from '@codemirror/state';
@@ -12,7 +12,7 @@ import {
   lineNumbers,
 } from '@codemirror/view';
 import { persistentAtom } from '@nanostores/persistent';
-import { registerControl, repl } from '@strudel/core';
+import { logger, registerControl, repl } from '@strudel/core';
 import { cleanupDraw, cleanupDrawContext, Drawer } from '@strudel/draw';
 import { isAutoCompletionEnabled } from './autocomplete.mjs';
 import { basicSetup } from './basicSetup.mjs';
@@ -289,6 +289,39 @@ export class StrudelMirror {
       }
     };
     document.addEventListener('start-repl', this.onStartRepl);
+
+    // Handle global evaluation requests (e.g., from Vim :w)
+    this.onEvaluateRequest = (e) => {
+      try {
+        if (e.detail.view !== this.editor) {
+          return; // ignore events from other editors
+        }
+        // Evaluate current editor on repl-evaluate
+        logger('[repl] evaluate via event');
+        this.evaluate();
+        e?.cancelable && e.preventDefault?.();
+      } catch (err) {
+        console.error('Error handling repl-evaluate event', err);
+      }
+    };
+    document.addEventListener('repl-evaluate', this.onEvaluateRequest);
+    document.addEventListener('repl-stop', this.onStopRequest);
+
+    // Toggle comments requested from Vim (gc)
+    this.onToggleComment = (e) => {
+      try {
+        if (e.detail.view !== this.editor) {
+          return; // ignore events from other editors
+        }
+        // Honor selections; toggleLineComment handles both selections and
+        // single line
+        toggleLineComment(this.editor);
+        e?.cancelable && e.preventDefault?.();
+      } catch (err) {
+        console.error('Error handling repl-toggle-comment event', err);
+      }
+    };
+    document.addEventListener('repl-toggle-comment', this.onToggleComment);
   }
   draw(haps, time, painters) {
     painters?.forEach((painter) => painter(this.drawContext, time, haps, this.drawTime));
@@ -317,6 +350,18 @@ export class StrudelMirror {
     this.repl.stop();
   }
 
+  // Listen for global stop requests (e.g., from Vim :q)
+  onStopRequest = (e) => {
+    try {
+      if (e.detail.view !== this.editor) {
+        return; // ignore events from other editors
+      }
+      this.stop();
+      e?.cancelable && e.preventDefault?.();
+    } catch (err) {
+      console.error('Error handling repl-stop event', err);
+    }
+  };
   async toggle() {
     if (this.repl.scheduler.started) {
       this.repl.stop();
@@ -421,6 +466,9 @@ export class StrudelMirror {
   }
   clear() {
     this.onStartRepl && document.removeEventListener('start-repl', this.onStartRepl);
+    this.onEvaluateRequest && document.removeEventListener('repl-evaluate', this.onEvaluateRequest);
+    this.onStopRequest && document.removeEventListener('repl-stop', this.onStopRequest);
+    this.onToggleComment && document.removeEventListener('repl-toggle-comment', this.onToggleComment);
   }
   getCursorLocation() {
     return this.editor.state.selection.main.head;

packages/codemirror/keybindings.mjs

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

packages/codemirror/package.json

@@ -47,11 +47,8 @@
     "codemirror-helix": "^0.5.0",
     "@strudel/core": "workspace:*",
     "@strudel/draw": "workspace:*",
-    "@strudel/tonal": "workspace:*",
     "@strudel/transpiler": "workspace:*",
-    "@tonaljs/tonal": "^4.10.0",
-    "nanostores": "^0.11.3",
-    "superdough": "workspace:*"
+    "nanostores": "^0.11.3"
   },
   "devDependencies": {
     "vite": "^6.0.11"

packages/tonal/index.mjs

@@ -1,9 +1,9 @@
 import './tonal.mjs';
 import './voicings.mjs';
-import './ireal.mjs';
 
 export * from './tonal.mjs';
 export * from './voicings.mjs';
-export * from './ireal.mjs';
+
+import './ireal.mjs';
 
 export const packageName = '@strudel/tonal';

pnpm-lock.yaml

@@ -242,24 +242,15 @@ importers:
       '@strudel/draw':
         specifier: workspace:*
         version: link:../draw
-      '@strudel/tonal':
-        specifier: workspace:*
-        version: link:../tonal
       '@strudel/transpiler':
         specifier: workspace:*
         version: link:../transpiler
-      '@tonaljs/tonal':
-        specifier: ^4.10.0
-        version: 4.10.0
       codemirror-helix:
         specifier: ^0.5.0
         version: 0.5.0(@codemirror/commands@6.8.0)(@codemirror/language@6.10.8)(@codemirror/search@6.5.8)(@codemirror/state@6.5.1)(@codemirror/view@6.36.2)
       nanostores:
         specifier: ^0.11.3
         version: 0.11.3
-      superdough:
-        specifier: workspace:*
-        version: link:../superdough
     devDependencies:
       vite:
         specifier: ^6.0.11

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

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

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

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

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

@@ -9,7 +9,7 @@ import { confirmDialog } from '../../util.mjs';
 import { DEFAULT_MAX_POLYPHONY, setMaxPolyphony, setMultiChannelOrbits } from '@strudel/webaudio';
 import { ActionButton } from '../button/action-button.jsx';
 import { exportScript, ImportPrebakeScriptButton } from './ImportPrebakeScriptButton.jsx';
-import { useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import cx from '@src/cx.mjs';
 
 const inputClass =
@@ -356,6 +356,11 @@ function MainSettingsContent({ started }) {
 function PrebakeSettingsContent() {
   const { fontFamily, includePrebakeScriptInShare, prebakeScript } = useSettings();
   const editorRef = useRef();
+  useEffect(() => {
+    return () => {
+      editorRef.current?.cleanup();
+    };
+  });
 
   return (
     <div className="flex flex-col h-full text-foreground w-full overflow-auto" style={{ fontFamily }}>

website/src/repl/prebakeCodeMirror.mjs

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