Merge branch 'main' into docs/xen/added-tune

2025-09-13 20:00:35 +02:00 · 2025-09-13 20:00:35 +02:00 · e57f240e70
commit e57f240e70
parent e87bb4376f e18296e760
106 changed files with 3988 additions and 466 deletions
--- a/website/src/pages/learn/code.mdx
+++ b/website/src/pages/learn/code.mdx
@ -44,7 +44,7 @@ xxx("foo").yyy("bar")

 Generally, `xxx` and `yyy` are called [_functions_](<https://en.wikipedia.org/wiki/Function_(computer_programming)>), while `foo` and `bar` are called function [_arguments_ or _parameters_](<https://en.wikipedia.org/wiki/Parameter_(computer_programming)>).
 So far, we've used the functions to declare which aspect of the sound we want to control, and their arguments for the actual data.
-The `yyy` function is called a [_chained_ function](https://en.wikipedia.org/wiki/Method_chaining), because it is appended with a dot (`.`).
+The `yyy` function is called a [_chained_ function](https://en.wikipedia.org/wiki/Method_chaining), because it is preceded with a dot (`.`).

 Generally, the idea with chaining is that code such as `a("this").b("that").c("other")` allows `a`, `b` and `c` functions to happen in a specified order, without needing to write them as three separate lines of code.
 You can think of this as being similar to chaining audio effects together using guitar pedals or digital audio effects.
--- a/website/src/pages/learn/conditional-modifiers.mdx
+++ b/website/src/pages/learn/conditional-modifiers.mdx
@ -34,11 +34,11 @@ import { JsDoc } from '../../docs/JsDoc';

 ## arp

-<JsDoc client:idle name="Pattern#arp" h={0} />
+<JsDoc client:idle name="arp" h={0} />

 ## arpWith 🧪

-<JsDoc client:idle name="Pattern#arpWith" h={0} />
+<JsDoc client:idle name="arpWith" h={0} />

 ## struct

@ -58,7 +58,7 @@ import { JsDoc } from '../../docs/JsDoc';

 ## hush

-<JsDoc client:idle name="hush" h={0} />
+<JsDoc client:idle name="Pattern#hush" h={0} />

 ## invert

--- a/website/src/pages/learn/effects.mdx
+++ b/website/src/pages/learn/effects.mdx
@ -11,6 +11,129 @@ import { JsDoc } from '../../docs/JsDoc';
 Whether you're using a synth or a sample, you can apply any of the following built-in audio effects.
 As you might suspect, the effects can be chained together, and they accept a pattern string as their argument.

+# Signal chain
+
+<img src="/img/strudel-signal-flow.png"></img>
+
+The signal chain in Strudel is as follows:
+
+- An sound-generating event is triggered by a pattern
+  - This has a start time and a duration, which is usually
+    controlled by the note length and ADSR parameters
+  - If we exceed the max polyphony, old sounds begin to die off
+  - Muted sounds (one whose `s` value is `-`, `~`, or `_`) are skipped
+- A sound is produced (through, say, a sample or an oscillator)
+  - This is where detune-based effects (like `detune`, `penv`, etc. occur)
+- The following will occur _in order_ and only if they've been called in the pattern. Note that all of these are
+  single use effects, meaning that multiple occurrences of them in a pattern will simply override the values
+  (e.g. you can't do `s("bd").lpf(100).distort(2).lpf(800)` to lowpass, distort, and then lowpass
+  again)
+  - Phase vocoder (`stretch`)
+  - Gain is applied (`gain`)
+    - This is where the main (volume) ADSR happens
+  - A lowpass filter (`lpf`)
+  - A highpass filter (`hpf`)
+  - A bandpass filter (`bandpass`)
+  - A vowel filter (`vowel`)
+  - Sample rate reduction (`coarse`)
+  - Bit crushing (`crush`)
+  - Waveshape distortion (`shape`)
+  - Normal distortion (`distort`)
+  - Tremolo (`tremolo`)
+  - Compressor (`compressor`)
+  - Panning (`pan`)
+  - Phaser (`phaser`)
+  - Postgain (`post`)
+- The sound is then split into multiple destinations
+  - Dry output (amount controlled by `dry` parameter)
+  - The sends
+    - Analyzers
+      - These are used for tooling like `scope` and `spectrum` and their setup usually happens behind the scenes
+    - Delay (amount controlled by `delay` parameter)
+    - Reverb (amount controlled by `room` parameter)
+- The dry output, delay, and reverb are joined into what is called the "orbit" of the pattern (see more in the section below)
+  - The `duck` effect affects the volume of all signals in the orbit
+  - The orbit is then sent to the mixer
+
+## Orbits
+
+Orbits are the way in which outputs are handled in Strudel. They also prescribe which delay and reverb to associate with the dry signal.
+By default, all orbits are mixed down to channels `1` and `2` in stereo, however with the "Multi Channel Orbits" setting
+(under Settings at the right) you can use them as individual 2 channel stereo outs (orbit `i` will be mapped to
+to channels `2i` and `2i + 1`). You can then use routers like Blackhole 16 to retrieve and record all of the channels in a DAW for later processing.
+
+The default orbit is `1` and it is set with `orbit`. You may send a sound to multiple orbits via mininotation
+
+<MiniRepl client:visible tune={`s("white").orbit("2,3,4").gain(0.2)`} />
+
+but please be careful as this will create three copies of the sound behind the scenes, meaning that if they are mixed
+down to a single output, they will triple the volume. We've reduced the gain here to save your ears.
+
+⚠️ There is only one delay and reverb per orbit, so please be aware that if you attempt to change the parameters on two
+patterns pointing to the same orbit, it can lead to unpredictable results. Compare, for example, this pretty pluck
+with a large reverb:
+
+<MiniRepl
+  client:visible
+  tune={`
+$: s("triangle*4").decay(0.5).n(irand(12)).scale('C minor')
+  .room(1).roomsize(10)`}
+/>
+
+versus the same pluck with a muted kick drum coming in and overwriting the `roomsize` value:
+
+<MiniRepl
+  client:visible
+  tune={`
+$: s("triangle*4").decay(0.5).n(irand(12)).scale('C minor')
+  .room(1).roomsize(10)
+
+$: s("bd\*4").room(0.01).roomsize(0.01).postgain(0)`}
+/>
+
+This is due to them sharing the same orbit: the default of `1`. It can be corrected simply by updating the orbits to be
+distinct:
+
+<MiniRepl
+  client:visible
+  tune={`
+$: s("triangle*4").decay(0.5).n(irand(12)).scale('C minor')
+  .room(1).roomsize(10).orbit(2)
+
+$: s("bd\*4").room(0.01).roomsize(0.01).postgain(0)`}
+/>
+
+## Continuous changes
+
+As all of the above is triggered by a _sound occurring_, it is often the case that parameters may not be
+modified continuously in time. For example,
+
+<MiniRepl
+  client:visible
+  tune={`
+s("supersaw").lpf(tri.range(100, 5000).slow(2))`}
+/>
+
+Will not produce a continually LFO'd low-pass filter due to the `tri` only being sampled every time the note hits
+(in this case the default of once per cycle). You can fake it by introducing more sound-generating events, e.g.:
+
+<MiniRepl
+  client:visible
+  tune={`
+s("supersaw").seg(16).lpf(tri.range(100, 5000).slow(2))`}
+/>
+
+Some parameters _do_ induce continuous variations in time, though:
+
+- The ADSR curve (governed by `attack`, `sustain`, `decay`, `release`)
+- The pitch envelope curve (governed by `penv` and its associated ADSR)
+- The FM curve (`fmenv`)
+- The filter envelopes (`lpenv`, `hpenv`, `bpenv`)
+- Tremolo (`tremolo`)
+- Phaser (`phaser`)
+- Vibrato (`vib`)
+- Ducking (`duckorbit`)
+
 # Filters

 Filters are an essential building block of [subtractive synthesis](https://en.wikipedia.org/wiki/Subtractive_synthesis).
@ -57,6 +180,34 @@ Each filter has 2 parameters:

 <JsDoc client:idle name="vowel" h={0} />

+# Amplitude Modulation
+
+Amplitude modulation changes the amplitude (gain) periodically over time.
+
+## am
+
+<JsDoc client:idle name="am" h={0} />
+
+## tremolosync
+
+<JsDoc client:idle name="tremolosync" h={0} />
+
+## tremolodepth
+
+<JsDoc client:idle name="tremolodepth" h={0} />
+
+## tremoloskew
+
+<JsDoc client:idle name="tremoloskew" h={0} />
+
+## tremolophase
+
+<JsDoc client:idle name="tremolophase" h={0} />
+
+## tremoloshape
+
+<JsDoc client:idle name="tremoloshape" h={0} />
+
 # Amplitude Envelope

 The amplitude [envelope](<https://en.wikipedia.org/wiki/Envelope_(music)>) controls the dynamic contour of a sound.
@ -311,4 +462,18 @@ global effects use the same chain for all events of the same orbit:

 <JsDoc client:idle name="phasersweep" h={0} />

+## Duck
+
+### duckorbit
+
+<JsDoc client:idle name="duckorbit" h={0} />
+
+### duckattack
+
+<JsDoc client:idle name="duckattack" h={0} />
+
+### duckdepth
+
+<JsDoc client:idle name="duckdepth" h={0} />
+
 Next, we'll look at input / output via [MIDI, OSC and other methods](/learn/input-output).
--- a/website/src/pages/learn/mini-notation.mdx
+++ b/website/src/pages/learn/mini-notation.mdx
@ -168,6 +168,20 @@ Using "!" we can repeat without speeding up:

 <MiniRepl client:idle tune={`note("<[g3,b3,e4]!2 [a3,c3,e4] [b3,d3,f#4]>*2")`} punchcard />

+## Randomness
+
+Events with a "?" placed after them will have a 50% chance of being removed from the pattern:
+
+<MiniRepl client:idle tune={`note("[g3,b3,e4]*8?")`} punchcard />
+
+Adding a number between 0 and 1 after the "?" will affect the likelihood of the event being removed. For example, events with "?0.1" placed after them will have a 10% chance of being removed:
+
+<MiniRepl client:idle tune={`note("[g3,b3,e4]*8?0.1")`} punchcard />
+
+Events separated by a "|" will be chosen from at random:
+
+<MiniRepl client:idle tune={`note("[g3,b3,e4] | [a3,c3,e4] | [b3,d3,f#4]")`} punchcard />
+
 ## Mini-notation review

 To recap what we've learned so far, compare the following patterns:
@ -179,6 +193,8 @@ To recap what we've learned so far, compare the following patterns:
 <MiniRepl client:idle tune={`note("<[g3,b3,e4] _ [a3,c3,e4] [b3,d3,f#4]>*2")`} />
 <MiniRepl client:idle tune={`note("<[g3,b3,e4]@2 [a3,c3,e4] [b3,d3,f#4]>*2")`} />
 <MiniRepl client:idle tune={`note("<[g3,b3,e4]!2 [a3,c3,e4] [b3,d3,f#4]>*2")`} />
+<MiniRepl client:idle tune={`note("<[g3,b3,e4]? [a3,c3,e4] [b3,d3,f#4]>*2")`} />
+<MiniRepl client:idle tune={`note("<[g3|b3|e4] [a3,c3,e4] [b3,d3,f#4]>*2")`} />

 ## Euclidian rhythms

--- a/website/src/pages/learn/mondo-notation.mdx
+++ b/website/src/pages/learn/mondo-notation.mdx
@ -176,3 +176,16 @@ $ chord <Dm9!3 Db7> # voicing
 />

 The `$` sign is an alias for `,` so it will create a stack behind the scenes.
+
+## variables
+
+using the `def` keyword, you can define variables:
+
+<MiniRepl
+  client:idle
+  mondo
+  tune={`
+$ def melody [0 1 2 3]
+$ n melody # scale C:minor
+`}
+/>
--- a/website/src/pages/learn/samples.mdx
+++ b/website/src/pages/learn/samples.mdx
@ -178,6 +178,16 @@ the version number).
 It is also possible, of course, to just remove it from cache (deleting cache in browser Privacy settings,
 or from the dev console if you're technically minded, or by using a cache deleting extension).

+## Generating strudel.json
+
+You can use [@strudel/sampler](https://www.npmjs.com/package/@strudel/sampler) to generate a strudel.json file for you, by running:
+
+```sh
+npx --yes @strudel/sampler --json > strudel.json
+```
+
+See other uses of strudel/sampler further below, under "From Disk via @strudel/sampler".
+
 ## Github Shortcut

 Because loading samples from github is common, there is a shortcut:
@ -361,6 +371,10 @@ Sampler effects are functions that can be used to change the behaviour of sample

 <JsDoc client:idle name="splice" h={0} />

+### scrub
+
+<JsDoc client:idle name="Pattern.scrub" h={0} />{' '}
+
 ### speed

 <JsDoc client:idle name="speed" h={0} />
--- a/website/src/pages/technical-manual/repl.mdx
+++ b/website/src/pages/technical-manual/repl.mdx
@ -9,7 +9,9 @@ import { MiniRepl } from '../../docs/MiniRepl';

 {/* The [REPL](https://strudel.cc/) is the place where all packages come together to form a live coding system. It can also be seen as a reference implementation for users of the library. */}

-While Strudel can be used as a library in any JavaScript codebase, its main, reference user interface is the Strudel REPL^[REPL stands for read, evaluate, print/play, loop. It is friendly jargon for an interactive programming interface from computing heritage, usually for a commandline interface but also applied to live coding editors.], which is a browser-based live coding environment. This live code editor is dedicated to manipulating Strudel patterns while they play. The REPL features built-in visual feedback, highlighting which elements in the patterned (mini-notation) sequences are influencing the event that is currently being played. This feedback is designed to support both learning and live use of Strudel.
+While Strudel can be used as a library in any JavaScript codebase, its main, reference user interface is the Strudel REPL[^1], which is a browser-based live coding environment. This live code editor is dedicated to manipulating Strudel patterns while they play. The REPL features built-in visual feedback, highlighting which elements in the patterned (mini-notation) sequences are influencing the event that is currently being played. This feedback is designed to support both learning and live use of Strudel.
+
+[^1]: REPL stands for read, evaluate, print/play, loop. It is friendly jargon for an interactive programming interface from computing heritage, usually for a commandline interface but also applied to live coding editors.

 Besides a UI for playback control and meta information, the main part of the REPL interface is the code editor powered by CodeMirror. In it, the user can edit and evaluate pattern code live, using one of the available synthesis outputs to create music and/or sound art. The control flow of the REPL follows 3 basic steps:

--- a/website/src/pages/understand/cycles.mdx
+++ b/website/src/pages/understand/cycles.mdx
@ -67,6 +67,8 @@ Or using 2 beats per cycle:
 s("bd sd, hh*4")`}
 />

+You can use the `setcps` method to set the global tempo in cycles per second. `setcpm(x)` is the same as `setcps(x / 60)`.
+
 <Box>

 To set a specific bpm, use `setcpm(bpm/bpc)`
--- a/website/src/repl/Repl.css
+++ b/website/src/repl/Repl.css
@ -69,3 +69,141 @@
  text-decoration: underline 0.18rem;
  text-underline-offset: 0.22rem;
 }
+
+/* Override default styles from the codemirror inline css for autocomplete info tooltip*/
+.cm-tooltip.cm-completionInfo {
+  padding: 0 !important;
+  border: 1px solid var(--foreground) !important;
+  border-radius: 4px !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
+  max-width: 500px !important;
+  min-width: 300px !important;
+  max-height: 400px !important;
+  background-color: var(--lineHighlight) !important;
+}
+
+/* Main tooltip container */
+.autocomplete-info-container {
+  padding: 12px !important;
+  border-radius: 4px !important;
+  color: var(--foreground);
+  font-family: var(--font-family, 'SF Mono', 'Monaco', monospace);
+  font-size: var(--font-size, 13px);
+  line-height: 1.4;
+  max-width: 600px;
+  max-height: 400px;
+  min-width: 400px;
+  white-space: normal !important;
+  overflow-y: auto !important;
+}
+
+.autocomplete-info-tooltip {
+  overflow-y: auto !important;
+}
+
+.autocomplete-info-function-description {
+  white-space: pre-wrap !important;
+}
+
+.autocomplete-info-function-name {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--foreground);
+  margin: 0 0 8px 0;
+}
+
+.autocomplete-info-function-description {
+  margin: 0 0 12px 0;
+  color: var(--foreground);
+  line-height: 1.5;
+  opacity: 0.8;
+}
+
+.autocomplete-info-section-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--foreground);
+  margin: 16px 0 6px 0;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.autocomplete-info-section-title:first-child {
+  margin-top: 0;
+}
+
+.autocomplete-info-params-section {
+  margin-top: 12px;
+}
+
+.autocomplete-info-params-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.autocomplete-info-param-item {
+  margin-bottom: 8px;
+  padding: 8px;
+  background-color: var(--lineBackground);
+  border-radius: 3px;
+  border-left: 2px solid var(--foreground, #555);
+}
+
+.autocomplete-info-param-item:last-child {
+  margin-bottom: 0;
+}
+
+.autocomplete-info-param-name {
+  font-weight: 600;
+  color: var(--variable, var(--foreground));
+  margin-right: 8px;
+}
+
+.autocomplete-info-param-type {
+  color: var(--comment);
+  font-size: 12px;
+  background-color: var(--gutterForeground);
+  padding: 1px 4px;
+  border-radius: 2px;
+}
+
+.autocomplete-info-param-desc {
+  color: var(--foreground);
+  font-size: 10px;
+  margin-top: 4px;
+  line-height: 1.4;
+  opacity: 0.7;
+}
+
+.autocomplete-info-examples-section {
+  margin-top: 12px;
+}
+
+.autocomplete-info-example-code {
+  background: var(--lineBackground);
+  color: var(--foreground);
+  padding: 8px;
+  border-radius: 3px;
+  font-family: var(--font-family, 'SF Mono', 'Monaco', monospace);
+  font-size: 12px;
+  line-height: 1.5;
+  margin: 4px 0;
+  overflow-x: auto;
+  white-space: pre;
+  border: 1px solid var(--foreground, #3a3a3a);
+}
+
+.autocomplete-info-tooltip::-webkit-scrollbar {
+  width: 4px;
+}
+
+.autocomplete-info-tooltip::-webkit-scrollbar-track {
+}
+
+.autocomplete-info-tooltip::-webkit-scrollbar-thumb {
+  border-radius: 2px;
+}
+
+.autocomplete-info-tooltip::-webkit-scrollbar-thumb:hover {
+}
--- a/website/src/repl/components/button/action-button.jsx
+++ b/website/src/repl/components/button/action-button.jsx
@ -0,0 +1,10 @@
+import cx from '@src/cx.mjs';
+
+export function ActionButton({ children, label, labelIsHidden, className, ...buttonProps }) {
+  return (
+    <button className={cx('hover:opacity-50 text-nowrap w-fit', className)} title={label} {...buttonProps}>
+      {labelIsHidden !== true && label}
+      {children}
+    </button>
+  );
+}
--- a/website/src/repl/components/panel/PatternsTab.jsx
+++ b/website/src/repl/components/panel/PatternsTab.jsx
@ -12,8 +12,8 @@ import { useMemo } from 'react';
 import { getMetadata } from '../../../metadata_parser.js';
 import { useExamplePatterns } from '../../useExamplePatterns.jsx';
 import { parseJSON, isUdels } from '../../util.mjs';
-import { ButtonGroup } from './Forms.jsx';
-import { settingsMap, useSettings } from '../../../settings.mjs';
+import { useSettings } from '../../../settings.mjs';
+import { ActionButton } from '../button/action-button.jsx';
 import { Pagination } from '../pagination/Pagination.jsx';
 import { useState } from 'react';
 import { useDebounce } from '../usedebounce.jsx';
@ -75,15 +75,6 @@ function PatternButtons({ patterns, activePattern, onClick, started }) {
  );
 }

-function ActionButton({ children, onClick, label, labelIsHidden }) {
-  return (
-    <button className="hover:opacity-50 text-nowrap" onClick={onClick} title={label}>
-      {labelIsHidden !== true && label}
-      {children}
-    </button>
-  );
-}
-
 const updateCodeWindow = (context, patternData, reset = false) => {
  context.handleUpdate(patternData, reset);
 };
@ -125,7 +116,7 @@ function UserPatterns({ context }) {
            style={{ display: 'none' }}
            type="file"
            multiple
-            accept="text/plain,application/json"
+            accept="text/plain,text/x-markdown,application/json"
            onChange={(e) => importPatterns(e.target.files)}
          />
          import
--- a/website/src/repl/components/panel/SettingsTab.jsx
+++ b/website/src/repl/components/panel/SettingsTab.jsx
@ -109,6 +109,8 @@ export function SettingsTab({ started }) {
    togglePanelTrigger,
    maxPolyphony,
    multiChannelOrbits,
+    isTabIndentationEnabled,
+    isMultiCursorEnabled,
  } = useSettings();
  const shouldAlwaysSync = isUdels();
  const canChangeAudioDevice = AudioContext.prototype.setSinkId != null;
@ -262,6 +264,16 @@ export function SettingsTab({ started }) {
          onChange={(cbEvent) => settingsMap.setKey('isLineWrappingEnabled', cbEvent.target.checked)}
          value={isLineWrappingEnabled}
        />
+        <Checkbox
+          label="Enable Tab indentation"
+          onChange={(cbEvent) => settingsMap.setKey('isTabIndentationEnabled', cbEvent.target.checked)}
+          value={isTabIndentationEnabled}
+        />
+        <Checkbox
+          label="Enable Multi-Cursor (Cmd/Ctrl+Click)"
+          onChange={(cbEvent) => settingsMap.setKey('isMultiCursorEnabled', cbEvent.target.checked)}
+          value={isMultiCursorEnabled}
+        />
        <Checkbox
          label="Enable flashing on evaluation"
          onChange={(cbEvent) => settingsMap.setKey('isFlashEnabled', cbEvent.target.checked)}
@ -299,7 +311,8 @@ export function SettingsTab({ started }) {
          onClick={() => {
            confirmDialog('Sure?').then((r) => {
              if (r) {
-                settingsMap.set(defaultSettings);
+                const { userPatterns } = settingsMap.get(); // keep current patterns
+                settingsMap.set({ ...defaultSettings, userPatterns });
              }
            });
          }}
--- a/website/src/repl/components/panel/SoundsTab.jsx
+++ b/website/src/repl/components/panel/SoundsTab.jsx
@ -2,16 +2,21 @@ import useEvent from '@src/useEvent.mjs';
 import { useStore } from '@nanostores/react';
 import { getAudioContext, soundMap, connectToDestination } from '@strudel/webaudio';
 import { useMemo, useRef, useState } from 'react';
-import { settingsMap, useSettings } from '../../../settings.mjs';
+import { settingsMap, soundFilterType, useSettings } from '../../../settings.mjs';
 import { ButtonGroup } from './Forms.jsx';
 import ImportSoundsButton from './ImportSoundsButton.jsx';
 import { Textbox } from '../textbox/Textbox.jsx';
+import { ActionButton } from '../button/action-button.jsx';
+import { confirmDialog } from '@src/repl/util.mjs';
+import { clearIDB, userSamplesDBConfig } from '@src/repl/idbutils.mjs';
+import { prebake } from '@src/repl/prebake.mjs';

 const getSamples = (samples) =>
  Array.isArray(samples) ? samples.length : typeof samples === 'object' ? Object.values(samples).length : 1;

 export function SoundsTab() {
  const sounds = useStore(soundMap);
+
  const { soundsFilter } = useSettings();
  const [search, setSearch] = useState('');
  const { BASE_URL } = import.meta.env;
@ -27,18 +32,19 @@ export function SoundsTab() {
      .sort((a, b) => a[0].localeCompare(b[0]))
      .filter(([name]) => name.toLowerCase().includes(search.toLowerCase()));

-    if (soundsFilter === 'user') {
+    if (soundsFilter === soundFilterType.USER) {
      return filtered.filter(([_, { data }]) => !data.prebake);
    }
-    if (soundsFilter === 'drums') {
+    if (soundsFilter === soundFilterType.DRUMS) {
      return filtered.filter(([_, { data }]) => data.type === 'sample' && data.tag === 'drum-machines');
    }
-    if (soundsFilter === 'samples') {
+    if (soundsFilter === soundFilterType.SAMPLES) {
      return filtered.filter(([_, { data }]) => data.type === 'sample' && data.tag !== 'drum-machines');
    }
-    if (soundsFilter === 'synths') {
+    if (soundsFilter === soundFilterType.SYNTHS) {
      return filtered.filter(([_, { data }]) => ['synth', 'soundfont'].includes(data.type));
    }
+    //TODO: tidy this up, it does not need to be saved in settings
    if (soundsFilter === 'importSounds') {
      return [];
    }
@ -57,10 +63,10 @@ export function SoundsTab() {
    });
  });
  return (
-    <div id="sounds-tab" className="px-4 flex flex-col w-full h-full text-foreground">
+    <div id="sounds-tab" className="px-4 flex gap-2 flex-col w-full h-full text-foreground">
      <Textbox placeholder="Search" value={search} onChange={(v) => setSearch(v)} />

-      <div className="pb-2 flex shrink-0 flex-wrap">
+      <div className=" flex shrink-0 flex-wrap">
        <ButtonGroup
          value={soundsFilter}
          onChange={(value) => settingsMap.setKey('soundsFilter', value)}
@ -74,7 +80,26 @@ export function SoundsTab() {
        ></ButtonGroup>
      </div>

-      <div className="min-h-0 max-h-full grow overflow-auto  text-sm break-normal pb-2">
+      {soundsFilter === soundFilterType.USER && soundEntries.length > 0 && (
+        <ActionButton
+          className="pl-2"
+          label="delete-all"
+          onClick={async () => {
+            try {
+              const confirmed = await confirmDialog('Delete all imported user samples?');
+              if (confirmed) {
+                clearIDB(userSamplesDBConfig.dbName);
+                soundMap.set({});
+                await prebake();
+              }
+            } catch (e) {
+              console.error(e);
+            }
+          }}
+        />
+      )}
+
+      <div className="min-h-0 max-h-full grow overflow-auto  text-sm break-normal bg-background p-2 rounded-md">
        {soundEntries.map(([name, { data, onTrigger }]) => {
          return (
            <span
@ -151,9 +176,7 @@ export function SoundsTab() {
        ) : (
          ''
        )}
-        {!soundEntries.length && soundsFilter !== 'importSounds'
-          ? 'No custom sounds loaded in this pattern (yet).'
-          : ''}
+        {!soundEntries.length && soundsFilter !== 'importSounds' ? 'No sounds loaded' : ''}
      </div>
    </div>
  );
--- a/website/src/repl/idbutils.mjs
+++ b/website/src/repl/idbutils.mjs
@ -12,17 +12,21 @@ export const userSamplesDBConfig = {
 };

 // deletes all of the databases, useful for debugging
-function clearIDB() {
+function clearAllIDB() {
  window.indexedDB
    .databases()
    .then((r) => {
-      for (var i = 0; i < r.length; i++) window.indexedDB.deleteDatabase(r[i].name);
+      for (var i = 0; i < r.length; i++) clearIDB(r[i].name);
    })
    .then(() => {
      alert('All data cleared.');
    });
 }

+export function clearIDB(dbName) {
+  return window.indexedDB.deleteDatabase(dbName);
+}
+
 // queries the DB, and registers the sounds so they can be played
 export function registerSamplesFromDB(config = userSamplesDBConfig, onComplete = () => {}) {
  openDB(config, (objectStore) => {
--- a/website/src/repl/prebake.mjs
+++ b/website/src/repl/prebake.mjs
@ -28,7 +28,10 @@ export async function prebake() {
      prebake: true,
      tag: 'drum-machines',
    }),
-    samples(`${baseNoTrailing}/EmuSP12.json`, undefined, { prebake: true, tag: 'drum-machines' }),
+    samples(`${baseNoTrailing}/uzu-drumkit.json`, undefined, {
+      prebake: true,
+      tag: 'drum-machines',
+    }),
    samples(`${baseNoTrailing}/mridangam.json`, undefined, { prebake: true, tag: 'drum-machines' }),
    samples(
      {
--- a/website/src/settings.mjs
+++ b/website/src/settings.mjs
@ -8,6 +8,14 @@ export const audioEngineTargets = {
  osc: 'osc',
 };

+export const soundFilterType = {
+  USER: 'user',
+  DRUMS: 'drums',
+  SAMPLES: 'samples',
+  SYNTHS: 'synths',
+  ALL: 'all',
+};
+
 export const defaultSettings = {
  activeFooter: 'intro',
  keybindings: 'codemirror',
@ -21,12 +29,14 @@ export const defaultSettings = {
  isSyncEnabled: false,
  isLineWrappingEnabled: false,
  isPatternHighlightingEnabled: true,
+  isTabIndentationEnabled: false,
+  isMultiCursorEnabled: false,
  theme: 'strudelTheme',
  fontFamily: 'monospace',
  fontSize: 18,
  latestCode: '',
  isZen: false,
-  soundsFilter: 'all',
+  soundsFilter: soundFilterType.ALL,
  patternFilter: 'community',
  // panelPosition: window.innerWidth > 1000 ? 'right' : 'bottom', //FIX: does not work on astro
  panelPosition: 'right',
@ -77,6 +87,8 @@ export function useSettings() {
    isLineWrappingEnabled: parseBoolean(state.isLineWrappingEnabled),
    isFlashEnabled: parseBoolean(state.isFlashEnabled),
    isSyncEnabled: isUdels() ? true : parseBoolean(state.isSyncEnabled),
+    isTabIndentationEnabled: parseBoolean(state.isTabIndentationEnabled),
+    isMultiCursorEnabled: parseBoolean(state.isMultiCursorEnabled),
    fontSize: Number(state.fontSize),
    panelPosition: state.activeFooter !== '' && !isUdels() ? state.panelPosition : 'bottom', // <-- keep this 'bottom' where it is!
    isPanelPinned: parseBoolean(state.isPanelPinned),
--- a/website/src/user_pattern_utils.mjs
+++ b/website/src/user_pattern_utils.mjs
@ -197,7 +197,7 @@ export async function importPatterns(fileList) {
      if (file.type === 'application/json') {
        const userPatterns = userPattern.getAll();
        setUserPatterns({ ...userPatterns, ...parseJSON(content) });
-      } else if (file.type === 'text/plain') {
+      } else if (['text/x-markdown', 'text/plain'].includes(file.type)) {
        const id = file.name.replace(/\.[^/.]+$/, '');
        userPattern.update(id, { code: content });
      }