Publish

- @strudel/codemirror@1.2.5
 - @strudel/repl@1.2.6

packages/codemirror/basicSetup.mjs

@@ -0,0 +1,63 @@
+import {
+  keymap,
+  highlightSpecialChars,
+  drawSelection,
+  highlightActiveLine,
+  dropCursor,
+  rectangularSelection,
+  crosshairCursor,
+  lineNumbers,
+  highlightActiveLineGutter,
+} from '@codemirror/view';
+import {
+  defaultHighlightStyle,
+  syntaxHighlighting,
+  bracketMatching,
+  foldGutter,
+  foldKeymap,
+} from '@codemirror/language';
+import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
+import { searchKeymap, highlightSelectionMatches } from '@codemirror/search';
+import { completionKeymap, closeBracketsKeymap } from '@codemirror/autocomplete';
+
+// Taken + slightly modified from https://github.com/codemirror/basic-setup/blob/main/src/codemirror.ts
+
+export const basicSetup = (() => [
+  //   lineNumbers(),
+  //   highlightActiveLineGutter(),
+  highlightSpecialChars(),
+  history(),
+  // foldGutter(),
+  // drawSelection(),
+  dropCursor(),
+  // EditorState.allowMultipleSelections.of(true),
+  // indentOnInput(),
+  // syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+  // autocompletion(),
+  rectangularSelection(),
+  crosshairCursor(),
+  // highlightActiveLine(),
+  // highlightSelectionMatches(),
+  keymap.of([
+    ...closeBracketsKeymap,
+    ...defaultKeymap,
+    // ...searchKeymap,
+    ...historyKeymap,
+    // ...foldKeymap,
+    // ...completionKeymap,
+  ]),
+])();
+
+/// A minimal set of extensions to create a functional editor. Only
+/// includes [the default keymap](#commands.defaultKeymap), [undo
+/// history](#commands.history), [special character
+/// highlighting](#view.highlightSpecialChars), [custom selection
+/// drawing](#view.drawSelection), and [default highlight
+/// style](#language.defaultHighlightStyle).
+export const minimalSetup = (() => [
+  highlightSpecialChars(),
+  history(),
+  drawSelection(),
+  syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+  keymap.of([...defaultKeymap, ...historyKeymap]),
+])();

packages/codemirror/codemirror.mjs

@@ -1,8 +1,8 @@
 import { closeBrackets } from '@codemirror/autocomplete';
 export { toggleComment, toggleBlockComment, toggleLineComment, toggleBlockCommentByLine } from '@codemirror/commands';
 // import { search, highlightSelectionMatches } from '@codemirror/search';
-import { history, indentWithTab } from '@codemirror/commands';
-import { javascript } from '@codemirror/lang-javascript';
+import { indentWithTab } from '@codemirror/commands';
+import { javascript, javascriptLanguage } from '@codemirror/lang-javascript';
 import { defaultHighlightStyle, syntaxHighlighting, bracketMatching } from '@codemirror/language';
 import { Compartment, EditorState, Prec } from '@codemirror/state';
 import {
@@ -24,6 +24,7 @@ import { initTheme, activateTheme, theme } from './themes.mjs';
 import { sliderPlugin, updateSliderWidgets } from './slider.mjs';
 import { widgetPlugin, updateWidgets } from './widget.mjs';
 import { persistentAtom } from '@nanostores/persistent';
+import { basicSetup } from './basicSetup.mjs';
 
 const extensions = {
   isLineWrappingEnabled: (on) => (on ? EditorView.lineWrapping : []),
@@ -85,13 +86,17 @@ export function initEditor({ initialCode = '', onChange, onEvaluate, onStop, roo
       /* search(),
       highlightSelectionMatches(), */
       ...initialSettings,
+      basicSetup,
       mondo ? [] : javascript(),
+      javascriptLanguage.data.of({
+        closeBrackets: { brackets: ['(', '[', '{', "'", '"', '<'] },
+        bracketMatching: { brackets: ['(', '[', '{', "'", '"', '<'] },
+      }),
       sliderPlugin,
       widgetPlugin,
       // indentOnInput(), // works without. already brought with javascript extension?
       // bracketMatching(), // does not do anything
       syntaxHighlighting(defaultHighlightStyle),
-      history(),
       EditorView.updateListener.of((v) => onChange(v)),
       drawSelection({ cursorBlinkRate: 0 }),
       Prec.highest(

packages/codemirror/keybindings.mjs

@@ -3,8 +3,9 @@ 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 } from './vim_test.mjs';
 import { vscodeKeymap } from '@replit/codemirror-vscode-keymap';
-import { defaultKeymap, historyKeymap } from '@codemirror/commands';
+import { defaultKeymap } from '@codemirror/commands';
 
 const vscodePlugin = ViewPlugin.fromClass(
   class {
@@ -27,5 +28,5 @@ const keymaps = {
 
 export function keybindings(name) {
   const active = keymaps[name];
-  return [active ? active() : [], keymap.of(historyKeymap)];
+  return [active ? Prec.high(active()) : []];
 }

packages/codemirror/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel/codemirror",
-  "version": "1.2.3",
+  "version": "1.2.5",
   "description": "Codemirror Extensions for Strudel",
   "main": "index.mjs",
   "publishConfig": {
@@ -42,7 +42,7 @@
     "@lezer/highlight": "^1.2.1",
     "@nanostores/persistent": "^0.10.2",
     "@replit/codemirror-emacs": "^6.1.0",
-    "@replit/codemirror-vim": "^6.2.1",
+    "@replit/codemirror-vim": "^6.3.0",
     "@replit/codemirror-vscode-keymap": "^6.0.2",
     "@strudel/core": "workspace:*",
     "@strudel/draw": "workspace:*",

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel/core",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "Port of Tidal Cycles to JavaScript",
   "main": "index.mjs",
   "type": "module",

packages/csound/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel/csound",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "description": "csound bindings for strudel",
   "main": "index.mjs",
   "type": "module",

packages/draw/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel/draw",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "Helpers for drawing with Strudel",
   "main": "index.mjs",
   "type": "module",

packages/gamepad/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel/gamepad",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "Gamepad Inputs for strudel",
   "main": "index.mjs",
   "type": "module",

packages/hydra/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel/hydra",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "Hydra integration for strudel",
   "main": "hydra.mjs",
   "type": "module",

packages/midi/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel/midi",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "description": "Midi API for strudel",
   "main": "index.mjs",
   "type": "module",

packages/mini/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel/mini",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "Mini notation for strudel",
   "main": "index.mjs",
   "type": "module",

packages/mondough/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel/mondo",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "mondo notation for strudel",
   "main": "mondough.mjs",
   "type": "module",

packages/motion/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel/motion",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "DeviceMotion API for strudel",
   "main": "index.mjs",
   "type": "module",

packages/mqtt/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel/mqtt",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "MQTT API for strudel",
   "main": "mqtt.mjs",
   "type": "module",

packages/osc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel/osc",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "OSC messaging for strudel",
   "main": "osc.mjs",
   "type": "module",

packages/repl/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel/repl",
-  "version": "1.2.4",
+  "version": "1.2.6",
   "description": "Strudel REPL as a Web Component",
   "module": "index.mjs",
   "publishConfig": {

packages/sampler/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel/sampler",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "",
   "keywords": [
     "tidalcycles",

packages/serial/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel/serial",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "Webserial API for strudel",
   "main": "serial.mjs",
   "type": "module",

packages/soundfonts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel/soundfonts",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "description": "Soundsfont support for strudel",
   "main": "index.mjs",
   "publishConfig": {

packages/superdough/package.json

@@ -1,6 +1,6 @@
 {
   "name": "superdough",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "description": "simple web audio synth and sampler intended for live coding. inspired by superdirt and webdirt.",
   "main": "index.mjs",
   "type": "module",

packages/tonal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel/tonal",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "Tonal functions for strudel",
   "main": "index.mjs",
   "publishConfig": {

packages/transpiler/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel/transpiler",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "Transpiler for strudel user code. Converts syntactically correct but semantically meaningless JS into evaluatable strudel code.",
   "main": "index.mjs",
   "type": "module",

packages/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel/web",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "description": "Easy to setup, opiniated bundle of Strudel for the browser.",
   "module": "web.mjs",
   "publishConfig": {

packages/webaudio/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel/webaudio",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "description": "Web Audio helpers for Strudel",
   "main": "index.mjs",
   "type": "module",

packages/xen/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel/xen",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "Xenharmonic API for strudel",
   "main": "index.mjs",
   "type": "module",

pnpm-lock.yaml

@@ -201,8 +201,8 @@ importers:
         specifier: ^6.1.0
         version: 6.1.0(@codemirror/autocomplete@6.18.4)(@codemirror/commands@6.8.0)(@codemirror/search@6.5.8)(@codemirror/state@6.5.1)(@codemirror/view@6.36.2)
       '@replit/codemirror-vim':
-        specifier: ^6.2.1
-        version: 6.2.1(@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)
+        specifier: ^6.3.0
+        version: 6.3.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)
       '@replit/codemirror-vscode-keymap':
         specifier: ^6.0.2
         version: 6.0.2(@codemirror/autocomplete@6.18.4)(@codemirror/commands@6.8.0)(@codemirror/language@6.10.8)(@codemirror/lint@6.8.4)(@codemirror/search@6.5.8)(@codemirror/state@6.5.1)(@codemirror/view@6.36.2)
@@ -2232,14 +2232,14 @@ packages:
       '@codemirror/state': ^6.0.1
       '@codemirror/view': ^6.3.0
 
-  '@replit/codemirror-vim@6.2.1':
-    resolution: {integrity: sha512-qDAcGSHBYU5RrdO//qCmD8K9t6vbP327iCj/iqrkVnjbrpFhrjOt92weGXGHmTNRh16cUtkUZ7Xq7rZf+8HVow==}
+  '@replit/codemirror-vim@6.3.0':
+    resolution: {integrity: sha512-aTx931ULAMuJx6xLf7KQDOL7CxD+Sa05FktTDrtLaSy53uj01ll3Zf17JdKsriER248oS55GBzg0CfCTjEneAQ==}
     peerDependencies:
-      '@codemirror/commands': ^6.0.0
-      '@codemirror/language': ^6.1.0
-      '@codemirror/search': ^6.2.0
-      '@codemirror/state': ^6.0.1
-      '@codemirror/view': ^6.0.3
+      '@codemirror/commands': 6.x.x
+      '@codemirror/language': 6.x.x
+      '@codemirror/search': 6.x.x
+      '@codemirror/state': 6.x.x
+      '@codemirror/view': 6.x.x
 
   '@replit/codemirror-vscode-keymap@6.0.2':
     resolution: {integrity: sha512-j45qTwGxzpsv82lMD/NreGDORFKSctMDVkGRopaP+OrzSzv+pXDQuU3LnFvKpasyjVT0lf+PKG1v2DSCn/vxxg==}
@@ -5714,6 +5714,7 @@ packages:
   node-domexception@1.0.0:
     resolution: {integrity: sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==}
     engines: {node: '>=10.5.0'}
+    deprecated: Use your platform's native DOMException instead
 
   node-fetch-native@1.6.6:
     resolution: {integrity: sha512-8Mc2HhqPdlIfedsuZoc3yioPuzp6b+L5jRCRY1QzuWZh2EGJVQrGppC6V6cF0bLdbW0+O2YpqCA25aF/1lvipQ==}
@@ -6803,6 +6804,7 @@ packages:
   source-map@0.8.0-beta.0:
     resolution: {integrity: sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==}
     engines: {node: '>= 8'}
+    deprecated: The work that was done in this beta branch won't be included in future versions
 
   sourcemap-codec@1.4.8:
     resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
@@ -7657,6 +7659,7 @@ packages:
 
   workbox-google-analytics@7.0.0:
     resolution: {integrity: sha512-MEYM1JTn/qiC3DbpvP2BVhyIH+dV/5BjHk756u9VbwuAhu0QHyKscTnisQuz21lfRpOwiS9z4XdqeVAKol0bzg==}
+    deprecated: It is not compatible with newer versions of GA starting with v4, as long as you are using GAv3 it should be ok, but the package is not longer being maintained
 
   workbox-navigation-preload@7.0.0:
     resolution: {integrity: sha512-juWCSrxo/fiMz3RsvDspeSLGmbgC0U9tKqcUPZBCf35s64wlaLXyn2KdHHXVQrb2cqF7I0Hc9siQalainmnXJA==}
@@ -9595,7 +9598,7 @@ snapshots:
       '@codemirror/state': 6.5.1
       '@codemirror/view': 6.36.2
 
-  '@replit/codemirror-vim@6.2.1(@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)':
+  '@replit/codemirror-vim@6.3.0(@codemirror/commands@6.8.0)(@codemirror/language@6.10.8)(@codemirror/search@6.5.8)(@codemirror/state@6.5.1)(@codemirror/view@6.36.2)':
     dependencies:
       '@codemirror/commands': 6.8.0
       '@codemirror/language': 6.10.8

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:
 

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>
+  );
+}

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);
 };

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>
   );

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) => {

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',
@@ -28,7 +36,7 @@ export const defaultSettings = {
   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',