Revert "Merge pull request 'Repurpose vim shortcuts for usability' (#1624) from dtricks/strudel:feat/vim-shortcuts into main"

This reverts commit 12204c9053, reversing
changes made to f2009a33aa.

.gitignore

@@ -45,6 +45,20 @@ 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,6 +1,11 @@
 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');
@@ -75,6 +80,53 @@ 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);
@@ -113,19 +165,299 @@ const jsdocCompletions = (() => {
   return completions;
 })();
 
-export const strudelAutocomplete = (context) => {
-  const word = context.matchBefore(/\w*/);
-  if (word.from === word.to && !context.explicit) return null;
+// --- 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: word.from,
-    options: jsdocCompletions,
-    /*     options: [
-      { label: 'match', type: 'keyword' },
-      { label: 'hello', type: 'variable', info: '(World)' },
-      { label: 'magic', type: 'text', apply: '⠁⭒*.✩.*⭒⠁', detail: 'macro' },
-    ], */
+    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;
 };
 
 export const isAutoCompletionEnabled = (enabled) =>

packages/codemirror/codemirror.mjs

@@ -1,5 +1,5 @@
 import { closeBrackets } from '@codemirror/autocomplete';
-import { indentWithTab, toggleLineComment } from '@codemirror/commands';
+import { indentWithTab } from '@codemirror/commands';
 import { javascript, javascriptLanguage } from '@codemirror/lang-javascript';
 import { bracketMatching, defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
 import { Compartment, EditorState, Prec } from '@codemirror/state';
@@ -12,7 +12,7 @@ import {
   lineNumbers,
 } from '@codemirror/view';
 import { persistentAtom } from '@nanostores/persistent';
-import { logger, registerControl, repl } from '@strudel/core';
+import { registerControl, repl } from '@strudel/core';
 import { cleanupDraw, cleanupDrawContext, Drawer } from '@strudel/draw';
 import { isAutoCompletionEnabled } from './autocomplete.mjs';
 import { basicSetup } from './basicSetup.mjs';
@@ -289,39 +289,6 @@ export class StrudelMirror {
       }
     };
     document.addEventListener('start-repl', this.onStartRepl);
-
-    // Handle global evaluation requests (e.g., from Vim :w)
-    this.onEvaluateRequest = (e) => {
-      try {
-        if (e.detail.view !== this.editor) {
-          return; // ignore events from other editors
-        }
-        // Evaluate current editor on repl-evaluate
-        logger('[repl] evaluate via event');
-        this.evaluate();
-        e?.cancelable && e.preventDefault?.();
-      } catch (err) {
-        console.error('Error handling repl-evaluate event', err);
-      }
-    };
-    document.addEventListener('repl-evaluate', this.onEvaluateRequest);
-    document.addEventListener('repl-stop', this.onStopRequest);
-
-    // Toggle comments requested from Vim (gc)
-    this.onToggleComment = (e) => {
-      try {
-        if (e.detail.view !== this.editor) {
-          return; // ignore events from other editors
-        }
-        // Honor selections; toggleLineComment handles both selections and
-        // single line
-        toggleLineComment(this.editor);
-        e?.cancelable && e.preventDefault?.();
-      } catch (err) {
-        console.error('Error handling repl-toggle-comment event', err);
-      }
-    };
-    document.addEventListener('repl-toggle-comment', this.onToggleComment);
   }
   draw(haps, time, painters) {
     painters?.forEach((painter) => painter(this.drawContext, time, haps, this.drawTime));
@@ -350,18 +317,6 @@ 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();
@@ -466,9 +421,6 @@ 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,11 +3,10 @@ import { Prec, EditorState } from '@codemirror/state';
 import { keymap, ViewPlugin } from '@codemirror/view';
 // import { searchKeymap } from '@codemirror/search';
 import { emacs } from '@replit/codemirror-emacs';
-import { vim, Vim } from '@replit/codemirror-vim';
+import { vim } from '@replit/codemirror-vim';
 // import { vim } from './vim_test.mjs';
 import { vscodeKeymap } from '@replit/codemirror-vscode-keymap';
-import { helix, commands } from 'codemirror-helix';
-import { logger } from '@strudel/core';
+import { helix } from 'codemirror-helix';
 
 const vscodePlugin = ViewPlugin.fromClass(
   class {
@@ -21,166 +20,12 @@ const vscodePlugin = ViewPlugin.fromClass(
 );
 const vscodeExtension = (options) => [vscodePlugin].concat(options ?? []);
 
-function replEval(view) {
-  try {
-    // Dispatch a dedicated evaluate event first
-    let handled = false;
-    try {
-      const ev = new CustomEvent('repl-evaluate', { detail: { source: 'vim', view }, cancelable: true });
-      handled = document.dispatchEvent(ev) === false; // false means preventDefault was called
-    } catch (e) {
-      console.error('Error dispatching repl-evaluate event', e);
-    }
-    if (handled) {
-      return;
-    }
-    // Try Ctrl+Enter first if not handled by custom event
-    const ctrlEnter = new KeyboardEvent('keydown', {
-      key: 'Enter',
-      code: 'Enter',
-      ctrlKey: true,
-      bubbles: true,
-      cancelable: true,
-    });
-    view?.dom?.dispatchEvent?.(ctrlEnter);
-    // If not handled (no handler called preventDefault), try Alt+Enter as
-    // fallback
-    if (!ctrlEnter.defaultPrevented) {
-      const altEnter = new KeyboardEvent('keydown', {
-        key: 'Enter',
-        code: 'Enter',
-        altKey: true,
-        bubbles: true,
-        cancelable: true,
-      });
-      view?.dom?.dispatchEvent?.(altEnter);
-    }
-  } catch (e) {
-    console.error('Error dispatching repl evaluation event', e);
-  }
-}
-
-function replStop(view) {
-  try {
-    // First try dispatching our custom stop event, then fallback to Alt+.
-    let handled = false;
-    try {
-      const ev = new CustomEvent('repl-stop', { detail: { source: 'vim', view }, cancelable: true });
-      handled = document.dispatchEvent(ev) === false;
-    } catch (e) {
-      console.error('Error dispatching repl-stop event', e);
-    }
-    if (!handled) {
-      const altDot = new KeyboardEvent('keydown', {
-        key: '.',
-        code: 'Period',
-        altKey: true,
-        bubbles: true,
-        cancelable: true,
-      });
-      view?.dom?.dispatchEvent?.(altDot);
-    }
-  } catch (e) {
-    console.error('Error dispatching repl stop event', e);
-  }
-}
-
-// Map Vim :w to trigger the same action as evaluation. We dispatch a custom
-// event 'repl-evaluate' that the editor listens for, and also simulate
-// Ctrl+Enter/Alt+Enter as a fallback. We log to the Strudel logger so it
-// appears in the Console panel.
-try {
-  if (Vim && typeof Vim.defineEx === 'function') {
-    // Map gc to toggle line comments by dispatching a custom event that our
-    // CodeMirror integration listens to. This avoids depending on Vim's
-    // internal actions and works with current selections/visual mode.
-    try {
-      Vim.defineAction('strudelToggleComment', (cm) => {
-        const view = cm.cm6;
-        try {
-          const ev = new CustomEvent('repl-toggle-comment', { detail: { source: 'vim', view }, cancelable: true });
-          document.dispatchEvent(ev);
-        } catch (e) {
-          console.error('strudelToggleComment dispatch failed', e);
-        }
-      });
-      Vim.mapCommand('gc', 'action', 'strudelToggleComment', {}, { context: 'normal' });
-      Vim.mapCommand('gc', 'action', 'strudelToggleComment', {}, { context: 'visual' });
-    } catch (e) {
-      console.error('Vim gc mapping failed', e);
-    }
-
-    // :q to pause/stop
-    Vim.defineEx('quit', 'q', (cm) => {
-      const view = cm.cm6;
-      logger('[vim] :q — stopping repl');
-      replStop(view);
-    });
-
-    // :w to evaluate
-    Vim.defineEx('write', 'w', (cm) => {
-      const view = cm.cm6;
-      try {
-        view.focus?.();
-        // Let the app know this came from Vim :w
-        try {
-          logger('[vim] :w — evaluating code');
-        } catch (e) {
-          console.error('Error logging Vim :w evaluation', e);
-        }
-        replEval(view);
-      } catch (e) {
-        console.error('Error dispatching :w evaluation event', e);
-      }
-    });
-  }
-} catch (e) {
-  console.error('Vim ex command setup failed (defineEx missing or Vim unavailable)', e);
-}
-
-// Map Helix :w to trigger the same action as evaluation. We dispatch a custom
-// event 'repl-evaluate' that the editor listens for, and also simulate
-// Ctrl+Enter/Alt+Enter as a fallback. We log to the Strudel logger so it
-// appears in the Console panel.
-const helixCommands = commands.of([
-  {
-    // :w to evaluate
-    name: 'write',
-    aliases: ['w'],
-    help: 'Repl-eval',
-    handler(view, args) {
-      try {
-        view?.focus?.(); // Let the app know this came from Helix :w
-        logger('[helix] :w — evaluating code');
-        replEval(view);
-      } catch (e) {
-        console.error('Error dispatching helix :w evaluation event', e);
-      }
-    },
-  },
-  {
-    // :q to pause/stop
-    name: 'quit',
-    aliases: ['q'],
-    help: 'Repl-stop',
-    handler(view, args) {
-      try {
-        view?.focus?.(); // Let the app know this came from Helix :q
-        logger('[helix] :q — stopping repl');
-        replStop(view);
-      } catch (e) {
-        console.error('Error dispatching helix :q stop event', e);
-      }
-    },
-  },
-]);
-
 const keymaps = {
   vim,
   emacs,
   codemirror: () => keymap.of(defaultKeymap),
   vscode: vscodeExtension,
-  helix: () => [helix(), helixCommands],
+  helix: () => [helix()],
 };
 
 export { Vim } from '@replit/codemirror-vim';

packages/codemirror/package.json

@@ -47,8 +47,11 @@
     "codemirror-helix": "^0.5.0",
     "@strudel/core": "workspace:*",
     "@strudel/draw": "workspace:*",
+    "@strudel/tonal": "workspace:*",
     "@strudel/transpiler": "workspace:*",
-    "nanostores": "^0.11.3"
+    "@tonaljs/tonal": "^4.10.0",
+    "nanostores": "^0.11.3",
+    "superdough": "workspace:*"
   },
   "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';
-
-import './ireal.mjs';
+export * from './ireal.mjs';
 
 export const packageName = '@strudel/tonal';

pnpm-lock.yaml

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

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

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

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

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

website/src/repl/prebakeCodeMirror.mjs

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