diff --git a/.astro/settings.json b/.astro/settings.json
new file mode 100644
index 000000000..bf82959bd
--- /dev/null
+++ b/.astro/settings.json
@@ -0,0 +1,5 @@
+{
+	"devToolbar": {
+		"enabled": false
+	}
+}
\ No newline at end of file
diff --git a/packages/codemirror/themes.mjs b/packages/codemirror/themes.mjs
index 1a523b391..dd561d30b 100644
--- a/packages/codemirror/themes.mjs
+++ b/packages/codemirror/themes.mjs
@@ -198,6 +198,7 @@ export function activateTheme(name) {
   const themeSettings = settings[name] || settings.strudelTheme;
   // set css variables
   themeStyle.innerHTML = `:root {
+      color-scheme: ${themeSettings.light ? 'light' : 'dark'};
       ${Object.entries(themeSettings)
         // important to override fallback
         .map(([key, value]) => `--${key}: ${value} !important;`)
diff --git a/packages/codemirror/themes/CutiePi.mjs b/packages/codemirror/themes/CutiePi.mjs
index 64b38eaa7..f535a2dad 100644
--- a/packages/codemirror/themes/CutiePi.mjs
+++ b/packages/codemirror/themes/CutiePi.mjs
@@ -17,13 +17,15 @@ export const settings = {
   background: 'white',
   lineBackground: 'transparent',
   foreground: deepPurple,
+  muted: deepPurple + '50',
   caret: '#797977',
   selection: yellowPink,
   selectionMatch: '#2B323D',
-  gutterBackground: grey,
+  gutterBackground: pinkAccent,
   gutterForeground: lightGrey,
   gutterBorder: 'transparent',
   lineHighlight: pinkAccent,
+  light: true,
 };
 
 export default createTheme({
diff --git a/packages/codemirror/themes/algoboy.mjs b/packages/codemirror/themes/algoboy.mjs
index 049ed596d..5eb90ff79 100644
--- a/packages/codemirror/themes/algoboy.mjs
+++ b/packages/codemirror/themes/algoboy.mjs
@@ -31,6 +31,7 @@ const palette = palettes['Sour Watermelon B'];
 export const settings = {
   background: palette[3],
   foreground: palette[1],
+  muted: palette[1] + '50',
   caret: palette[0],
   selection: palette[0],
   selectionMatch: palette[1],
diff --git a/packages/codemirror/themes/androidstudio.mjs b/packages/codemirror/themes/androidstudio.mjs
index 77c16c331..35b5b7464 100644
--- a/packages/codemirror/themes/androidstudio.mjs
+++ b/packages/codemirror/themes/androidstudio.mjs
@@ -8,6 +8,7 @@ export const settings = {
   background: '#282b2e',
   lineBackground: '#282b2e99',
   foreground: '#a9b7c6',
+  muted: '#a9b7c650',
   caret: '#00FF00',
   selection: '#343739',
   selectionMatch: '#343739',
@@ -19,6 +20,7 @@ export default createTheme({
   settings: {
     background: '#282b2e',
     foreground: '#a9b7c6',
+    muted: '#a9b7c650',
     caret: '#00FF00',
     selection: '#4e5254',
     selectionMatch: '#4e5254',
diff --git a/packages/codemirror/themes/archBtw.mjs b/packages/codemirror/themes/archBtw.mjs
index 87546569c..3bc5684ea 100644
--- a/packages/codemirror/themes/archBtw.mjs
+++ b/packages/codemirror/themes/archBtw.mjs
@@ -12,6 +12,7 @@ export const settings = {
   background: hex[0],
   lineBackground: 'transparent',
   foreground: hex[1],
+  muted: hex[2],
   selection: hex[2],
   selectionMatch: hex[0],
   gutterBackground: hex[0],
diff --git a/packages/codemirror/themes/atomone.mjs b/packages/codemirror/themes/atomone.mjs
index ab9cd3607..bc7a3254a 100644
--- a/packages/codemirror/themes/atomone.mjs
+++ b/packages/codemirror/themes/atomone.mjs
@@ -11,6 +11,7 @@ export const settings = {
   background: '#272C35',
   lineBackground: '#272C3599',
   foreground: 'hsl(220, 14%, 71%)',
+  muted: 'hsl(220, 14%, 41%)',
   caret: '#797977',
   selection: '#ffffff30',
   selectionMatch: '#2B323D',
@@ -25,6 +26,7 @@ export default createTheme({
   settings: {
     background: '#272C35',
     foreground: '#9d9b97',
+    muted: 'hsl(220, 14%, 41%)',
     caret: '#797977',
     selection: '#3d4c64',
     selectionMatch: '#3d4c64',
diff --git a/packages/codemirror/themes/aura.mjs b/packages/codemirror/themes/aura.mjs
index b42a5839b..08bb5ea24 100644
--- a/packages/codemirror/themes/aura.mjs
+++ b/packages/codemirror/themes/aura.mjs
@@ -5,6 +5,7 @@ export const settings = {
   background: '#21202e',
   lineBackground: '#21202e99',
   foreground: '#edecee',
+  muted: '#edecee50',
   caret: '#a277ff',
   selection: '#3d375e7f',
   selectionMatch: '#3d375e7f',
@@ -18,6 +19,7 @@ export default createTheme({
   settings: {
     background: '#21202e',
     foreground: '#edecee',
+    muted: '#edecee50',
     caret: '#a277ff',
     selection: '#5a51898f',
     selectionMatch: '#5a51898f',
diff --git a/packages/codemirror/themes/bbedit.mjs b/packages/codemirror/themes/bbedit.mjs
index 535bf9eaa..0555ac1a4 100644
--- a/packages/codemirror/themes/bbedit.mjs
+++ b/packages/codemirror/themes/bbedit.mjs
@@ -6,6 +6,7 @@ export const settings = {
   background: '#FFFFFF',
   lineBackground: '#FFFFFF99',
   foreground: '#000000',
+  muted: '#00000050',
   caret: '#FBAC52',
   selection: '#FFD420',
   selectionMatch: '#FFD420',
@@ -20,6 +21,7 @@ export default createTheme({
   settings: {
     background: '#FFFFFF',
     foreground: '#000000',
+    muted: '#00000050',
     caret: '#FBAC52',
     selection: '#FFD420',
     selectionMatch: '#FFD420',
diff --git a/packages/codemirror/themes/blackscreen.mjs b/packages/codemirror/themes/blackscreen.mjs
index 2c45df11b..462dc200b 100644
--- a/packages/codemirror/themes/blackscreen.mjs
+++ b/packages/codemirror/themes/blackscreen.mjs
@@ -2,7 +2,8 @@ import { tags as t } from '@lezer/highlight';
 import { createTheme } from './theme-helper.mjs';
 export const settings = {
   background: 'black',
-  foreground: 'white', // whats that?
+  foreground: 'white',
+  muted: '#ffffff50',
   caret: 'white',
   selection: '#ffffff20',
   selectionMatch: '#036dd626',
diff --git a/packages/codemirror/themes/bluescreen.mjs b/packages/codemirror/themes/bluescreen.mjs
index 97d165c9d..a3b9648d8 100644
--- a/packages/codemirror/themes/bluescreen.mjs
+++ b/packages/codemirror/themes/bluescreen.mjs
@@ -3,7 +3,8 @@ import { createTheme } from './theme-helper.mjs';
 export const settings = {
   background: '#051DB5',
   lineBackground: '#051DB550',
-  foreground: 'white', // whats that?
+  foreground: 'white',
+  muted: '#ffffff50',
   caret: 'white',
   selection: 'rgba(128, 203, 196, 0.5)',
   selectionMatch: '#036dd626',
diff --git a/packages/codemirror/themes/bluescreenlight.mjs b/packages/codemirror/themes/bluescreenlight.mjs
index 031a3da33..7e10659fa 100644
--- a/packages/codemirror/themes/bluescreenlight.mjs
+++ b/packages/codemirror/themes/bluescreenlight.mjs
@@ -11,6 +11,7 @@ export const settings = {
   background: hex[0],
   lineBackground: 'transparent',
   foreground: hex[2],
+  muted: hex[3],
   selection: hex[3],
   selectionMatch: hex[0],
   gutterBackground: hex[0],
diff --git a/packages/codemirror/themes/darcula.mjs b/packages/codemirror/themes/darcula.mjs
index ead66e663..ee510764b 100644
--- a/packages/codemirror/themes/darcula.mjs
+++ b/packages/codemirror/themes/darcula.mjs
@@ -9,6 +9,7 @@ export const settings = {
   background: '#242424',
   lineBackground: '#24242499',
   foreground: '#f8f8f2',
+  muted: '#f8f8f250',
   caret: '#FFFFFF',
   selection: 'rgba(255, 255, 255, 0.1)',
   selectionMatch: 'rgba(255, 255, 255, 0.2)',
@@ -23,6 +24,7 @@ export default createTheme({
   settings: {
     background: '#242424',
     foreground: '#f8f8f2',
+    muted: '#f8f8f250',
     caret: '#FFFFFF',
     selection: 'rgba(255, 255, 255, 0.1)',
     selectionMatch: 'rgba(255, 255, 255, 0.2)',
diff --git a/packages/codemirror/themes/dracula.mjs b/packages/codemirror/themes/dracula.mjs
index bdd9617de..514b63719 100644
--- a/packages/codemirror/themes/dracula.mjs
+++ b/packages/codemirror/themes/dracula.mjs
@@ -11,6 +11,7 @@ export const settings = {
   background: '#282a36',
   lineBackground: '#282a3699',
   foreground: '#f8f8f2',
+  muted: '#f8f8f250',
   caret: '#f8f8f0',
   selection: 'rgba(255, 255, 255, 0.1)',
   selectionMatch: 'rgba(255, 255, 255, 0.2)',
@@ -27,6 +28,7 @@ export default createTheme({
   settings: {
     background: '#282a36',
     foreground: '#f8f8f2',
+    muted: '#f8f8f250',
     caret: '#f8f8f0',
     selection: 'rgba(255, 255, 255, 0.1)',
     selectionMatch: 'rgba(255, 255, 255, 0.2)',
diff --git a/packages/codemirror/themes/duotoneDark.mjs b/packages/codemirror/themes/duotoneDark.mjs
index f54973e85..72e07cd66 100644
--- a/packages/codemirror/themes/duotoneDark.mjs
+++ b/packages/codemirror/themes/duotoneDark.mjs
@@ -10,6 +10,7 @@ export const settings = {
   background: '#2a2734',
   lineBackground: '#2a273499',
   foreground: '#eeebff',
+  muted: '#eeebff50',
   caret: '#ffad5c',
   selection: 'rgba(255, 255, 255, 0.1)',
   gutterBackground: '#2a2734',
@@ -22,6 +23,7 @@ export default createTheme({
   settings: {
     background: '#2a2734',
     foreground: '#6c6783',
+    muted: '#eeebff50',
     caret: '#ffad5c',
     selection: '#9a86fd',
     selectionMatch: '#9a86fd',
diff --git a/packages/codemirror/themes/eclipse.mjs b/packages/codemirror/themes/eclipse.mjs
index 8082b59da..8c3671eb7 100644
--- a/packages/codemirror/themes/eclipse.mjs
+++ b/packages/codemirror/themes/eclipse.mjs
@@ -6,6 +6,7 @@ export const settings = {
   background: '#fff',
   lineBackground: '#ffffff99',
   foreground: '#000',
+  muted: '#00000050',
   caret: '#FFFFFF',
   selection: '#d7d4f0',
   selectionMatch: '#d7d4f0',
@@ -20,6 +21,7 @@ export default createTheme({
   settings: {
     background: '#fff',
     foreground: '#000',
+    muted: '#00000050',
     caret: '#FFFFFF',
     selection: '#d7d4f0',
     selectionMatch: '#d7d4f0',
diff --git a/packages/codemirror/themes/fruitDaw.mjs b/packages/codemirror/themes/fruitDaw.mjs
index c9e557796..68b7857e7 100644
--- a/packages/codemirror/themes/fruitDaw.mjs
+++ b/packages/codemirror/themes/fruitDaw.mjs
@@ -23,6 +23,7 @@ export const settings = {
   background: hex[0],
   lineBackground: 'transparent',
   foreground: hex[10],
+  muted: hex[7],
   selection: hex[8],
   selectionMatch: hex[0],
   gutterBackground: hex[3],
diff --git a/packages/codemirror/themes/githubDark.mjs b/packages/codemirror/themes/githubDark.mjs
index 477e7d7b8..3b11eac38 100644
--- a/packages/codemirror/themes/githubDark.mjs
+++ b/packages/codemirror/themes/githubDark.mjs
@@ -5,6 +5,7 @@ export const settings = {
   background: '#0d1117',
   lineBackground: '#0d111799',
   foreground: '#c9d1d9',
+  muted: '#c9d1d950',
   caret: '#c9d1d9',
   selection: '#003d73',
   selectionMatch: '#003d73',
@@ -16,6 +17,7 @@ export default createTheme({
   settings: {
     background: '#0d1117',
     foreground: '#c9d1d9',
+    muted: '#c9d1d950',
     caret: '#c9d1d9',
     selection: '#003d73',
     selectionMatch: '#003d73',
diff --git a/packages/codemirror/themes/githubLight.mjs b/packages/codemirror/themes/githubLight.mjs
index 2ccec93b6..26b1d5725 100644
--- a/packages/codemirror/themes/githubLight.mjs
+++ b/packages/codemirror/themes/githubLight.mjs
@@ -6,6 +6,7 @@ export const settings = {
   background: '#fff',
   lineBackground: '#ffffff99',
   foreground: '#24292e',
+  muted: '#24292e50',
   selection: '#BBDFFF',
   selectionMatch: '#BBDFFF',
   gutterBackground: '#fff',
@@ -17,6 +18,7 @@ export default createTheme({
   settings: {
     background: '#fff',
     foreground: '#24292e',
+    muted: '#24292e50',
     selection: '#BBDFFF',
     selectionMatch: '#BBDFFF',
     gutterBackground: '#fff',
diff --git a/packages/codemirror/themes/green-text.mjs b/packages/codemirror/themes/green-text.mjs
index 08c7a4bbe..7d3a47fb2 100644
--- a/packages/codemirror/themes/green-text.mjs
+++ b/packages/codemirror/themes/green-text.mjs
@@ -13,6 +13,7 @@ export const settings = {
   background: hex[0],
   lineBackground: 'transparent',
   foreground: hex[2],
+  muted: hex[2] + '50',
   selection: hex[4],
   selectionMatch: hex[0],
   gutterBackground: hex[0],
diff --git a/packages/codemirror/themes/gruvboxDark.mjs b/packages/codemirror/themes/gruvboxDark.mjs
index 67d8bffc1..2cc9274e1 100644
--- a/packages/codemirror/themes/gruvboxDark.mjs
+++ b/packages/codemirror/themes/gruvboxDark.mjs
@@ -10,6 +10,7 @@ export const settings = {
   background: '#282828',
   lineBackground: '#28282899',
   foreground: '#ebdbb2',
+  muted: '#ebdbb250',
   caret: '#ebdbb2',
   selection: '#bdae93',
   selectionMatch: '#bdae93',
@@ -23,6 +24,7 @@ export default createTheme({
   settings: {
     background: '#282828',
     foreground: '#ebdbb2',
+    muted: '#ebdbb250',
     caret: '#ebdbb2',
     selection: '#b99d555c',
     selectionMatch: '#b99d555c',
diff --git a/packages/codemirror/themes/gruvboxLight.mjs b/packages/codemirror/themes/gruvboxLight.mjs
index 5d4b4ec01..8e529b21d 100644
--- a/packages/codemirror/themes/gruvboxLight.mjs
+++ b/packages/codemirror/themes/gruvboxLight.mjs
@@ -11,6 +11,7 @@ export const settings = {
   background: '#fbf1c7',
   lineBackground: '#fbf1c799',
   foreground: '#3c3836',
+  muted: '#3c383650',
   caret: '#af3a03',
   selection: '#ebdbb2',
   selectionMatch: '#bdae93',
@@ -25,6 +26,7 @@ export default createTheme({
   settings: {
     background: '#fbf1c7',
     foreground: '#3c3836',
+    muted: '#3c383650',
     caret: '#af3a03',
     selection: '#bdae9391',
     selectionMatch: '#bdae9391',
diff --git a/packages/codemirror/themes/materialDark.mjs b/packages/codemirror/themes/materialDark.mjs
index f13412885..0c4ef0545 100644
--- a/packages/codemirror/themes/materialDark.mjs
+++ b/packages/codemirror/themes/materialDark.mjs
@@ -5,6 +5,7 @@ export const settings = {
   background: '#212121',
   lineBackground: '#21212199',
   foreground: '#bdbdbd',
+  muted: '#bdbdbd50',
   caret: '#a0a4ae',
   selection: '#d7d4f0',
   selectionMatch: '#d7d4f0',
@@ -19,6 +20,7 @@ export default createTheme({
   settings: {
     background: '#212121',
     foreground: '#bdbdbd',
+    muted: '#bdbdbd50',
     caret: '#a0a4ae',
     selection: '#d7d4f063',
     selectionMatch: '#d7d4f063',
diff --git a/packages/codemirror/themes/materialLight.mjs b/packages/codemirror/themes/materialLight.mjs
index d2598c649..798842bf2 100644
--- a/packages/codemirror/themes/materialLight.mjs
+++ b/packages/codemirror/themes/materialLight.mjs
@@ -5,7 +5,8 @@ export const settings = {
   light: true,
   background: '#FAFAFA',
   lineBackground: '#FAFAFA99',
-  foreground: '#90A4AE',
+  foreground: '#6182B8',
+  muted: '#6182B850',
   caret: '#272727',
   selection: '#80CBC440',
   selectionMatch: '#FAFAFA',
@@ -19,6 +20,7 @@ export default createTheme({
   settings: {
     background: '#FAFAFA',
     foreground: '#90A4AE',
+    muted: '#6182B850',
     caret: '#272727',
     selection: '#80CBC440',
     selectionMatch: '#80CBC440',
diff --git a/packages/codemirror/themes/monokai.mjs b/packages/codemirror/themes/monokai.mjs
index 294b946b5..926e38219 100644
--- a/packages/codemirror/themes/monokai.mjs
+++ b/packages/codemirror/themes/monokai.mjs
@@ -5,6 +5,7 @@ export const settings = {
   background: '#272822',
   lineBackground: '#27282299',
   foreground: '#FFFFFF',
+  muted: '#FFFFFF50',
   caret: '#FFFFFF',
   selection: '#49483E',
   selectionMatch: '#49483E',
@@ -18,6 +19,7 @@ export default createTheme({
   settings: {
     background: '#272822',
     foreground: '#FFFFFF',
+    muted: '#FFFFFF50',
     caret: '#FFFFFF',
     selection: '#49483E',
     selectionMatch: '#49483E',
diff --git a/packages/codemirror/themes/noctisLilac.mjs b/packages/codemirror/themes/noctisLilac.mjs
index b11c6b40b..398043394 100644
--- a/packages/codemirror/themes/noctisLilac.mjs
+++ b/packages/codemirror/themes/noctisLilac.mjs
@@ -6,6 +6,7 @@ export const settings = {
   background: '#f2f1f8',
   lineBackground: '#f2f1f899',
   foreground: '#0c006b',
+  muted: '#0c006b50',
   caret: '#5c49e9',
   selection: '#d5d1f2',
   selectionMatch: '#d5d1f2',
@@ -19,6 +20,7 @@ export default createTheme({
   settings: {
     background: '#f2f1f8',
     foreground: '#0c006b',
+    muted: '#0c006b50',
     caret: '#5c49e9',
     selection: '#d5d1f2',
     selectionMatch: '#d5d1f2',
diff --git a/packages/codemirror/themes/nord.mjs b/packages/codemirror/themes/nord.mjs
index ce96bca57..efa4b6bf5 100644
--- a/packages/codemirror/themes/nord.mjs
+++ b/packages/codemirror/themes/nord.mjs
@@ -5,6 +5,7 @@ export const settings = {
   background: '#2e3440',
   lineBackground: '#2e344099',
   foreground: '#FFFFFF',
+  muted: '#FFFFFF50',
   caret: '#FFFFFF',
   selection: '#3b4252',
   selectionMatch: '#e5e9f0',
@@ -20,6 +21,7 @@ export default createTheme({
   settings: {
     background: '#2e3440',
     foreground: '#FFFFFF',
+    muted: '#FFFFFF50',
     caret: '#FFFFFF',
     selection: '#00000073',
     selectionMatch: '#00000073',
diff --git a/packages/codemirror/themes/red-text.mjs b/packages/codemirror/themes/red-text.mjs
index 44dda5dc0..5ba9d2152 100644
--- a/packages/codemirror/themes/red-text.mjs
+++ b/packages/codemirror/themes/red-text.mjs
@@ -13,6 +13,7 @@ export const settings = {
   background: hex[0],
   lineBackground: 'transparent',
   foreground: hex[2],
+  muted: hex[2] + '50',
   selection: hex[4],
   selectionMatch: hex[0],
   gutterBackground: hex[0],
diff --git a/packages/codemirror/themes/solarizedDark.mjs b/packages/codemirror/themes/solarizedDark.mjs
index c6b645f7a..6848b537e 100644
--- a/packages/codemirror/themes/solarizedDark.mjs
+++ b/packages/codemirror/themes/solarizedDark.mjs
@@ -5,6 +5,7 @@ export const settings = {
   background: '#002b36',
   lineBackground: '#002b3699',
   foreground: '#93a1a1',
+  muted: '#93a1a150',
   caret: '#839496',
   selection: '#173541',
   selectionMatch: '#aafe661a',
@@ -45,6 +46,7 @@ export default createTheme({
   settings: {
     background: c.background,
     foreground: c.foreground,
+    muted: c.muted,
     caret: c.cursor,
     selection: c.selection,
     selectionMatch: c.selection,
diff --git a/packages/codemirror/themes/solarizedLight.mjs b/packages/codemirror/themes/solarizedLight.mjs
index b6828ff6c..0a0c61a12 100644
--- a/packages/codemirror/themes/solarizedLight.mjs
+++ b/packages/codemirror/themes/solarizedLight.mjs
@@ -8,6 +8,7 @@ export const settings = {
   background: '#fdf6e3',
   lineBackground: '#fdf6e399',
   foreground: '#657b83',
+  muted: '#657b8350',
   caret: '#586e75',
   selection: '#dfd9c8',
   selectionMatch: '#dfd9c8',
@@ -19,6 +20,7 @@ export const settings = {
 const c = {
   background: '#FDF6E3',
   foreground: '#657B83',
+  muted: '#657b8350',
   selection: '#EEE8D5',
   selectionMatch: '#EEE8D5',
   cursor: '#657B83',
diff --git a/packages/codemirror/themes/sonic-pink.mjs b/packages/codemirror/themes/sonic-pink.mjs
index 5a19555ab..19c5e5e87 100644
--- a/packages/codemirror/themes/sonic-pink.mjs
+++ b/packages/codemirror/themes/sonic-pink.mjs
@@ -13,6 +13,7 @@ export const settings = {
   background: '#000000',
   lineBackground: 'transparent',
   foreground: hex[4],
+  muted: hex[6],
   selection: hex[6],
   gutterBackground: hex[0],
   gutterForeground: hex[5],
diff --git a/packages/codemirror/themes/strudel-theme.mjs b/packages/codemirror/themes/strudel-theme.mjs
index 7c4a3a919..58c675638 100644
--- a/packages/codemirror/themes/strudel-theme.mjs
+++ b/packages/codemirror/themes/strudel-theme.mjs
@@ -5,6 +5,7 @@ export const settings = {
   background: '#222',
   lineBackground: '#22222299',
   foreground: '#fff',
+  muted: '#8a919966',
   caret: '#ffcc00',
   selection: 'rgba(128, 203, 196, 0.5)',
   selectionMatch: '#036dd626',
diff --git a/packages/codemirror/themes/sublime.mjs b/packages/codemirror/themes/sublime.mjs
index 068b9bac9..111f1e505 100644
--- a/packages/codemirror/themes/sublime.mjs
+++ b/packages/codemirror/themes/sublime.mjs
@@ -5,6 +5,7 @@ export const settings = {
   background: '#303841',
   lineBackground: '#30384199',
   foreground: '#FFFFFF',
+  muted: '#FFFFFF50',
   caret: '#FBAC52',
   selection: '#4C5964',
   selectionMatch: '#3A546E',
@@ -18,6 +19,7 @@ export default createTheme({
   settings: {
     background: '#303841',
     foreground: '#FFFFFF',
+    muted: '#FFFFFF50',
     caret: '#FBAC52',
     selection: '#4C5964',
     selectionMatch: '#3A546E',
diff --git a/packages/codemirror/themes/teletext.mjs b/packages/codemirror/themes/teletext.mjs
index 7857cb133..280eda979 100644
--- a/packages/codemirror/themes/teletext.mjs
+++ b/packages/codemirror/themes/teletext.mjs
@@ -9,7 +9,8 @@ let colorD = '#f8fc55';
 
 export const settings = {
   background: '#000000',
-  foreground: colorA, // whats that?
+  foreground: colorA,
+  muted: colorA + '50',
   caret: colorC,
   selection: colorD,
   selectionMatch: colorA,
diff --git a/packages/codemirror/themes/tokioNightStorm.mjs b/packages/codemirror/themes/tokioNightStorm.mjs
index be973d52f..ab940da01 100644
--- a/packages/codemirror/themes/tokioNightStorm.mjs
+++ b/packages/codemirror/themes/tokioNightStorm.mjs
@@ -4,7 +4,8 @@ import { createTheme } from './theme-helper.mjs';
 export const settings = {
   background: '#24283b',
   lineBackground: '#24283b99',
-  foreground: '#7982a9',
+  foreground: '#f9f2f9',
+  muted: '#f9f2f950',
   caret: '#c0caf5',
   selection: '#6f7bb630',
   selectionMatch: '#1f2335',
@@ -18,7 +19,8 @@ export default createTheme({
   theme: 'dark',
   settings: {
     background: '#24283b',
-    foreground: '#7982a9',
+    foreground: '#f9f2f9',
+    muted: '#f9f2f950',
     caret: '#c0caf5',
     selection: '#6f7bb630',
     selectionMatch: '#343b5f',
diff --git a/packages/codemirror/themes/tokyoNight.mjs b/packages/codemirror/themes/tokyoNight.mjs
index c325b4ad7..29a656676 100644
--- a/packages/codemirror/themes/tokyoNight.mjs
+++ b/packages/codemirror/themes/tokyoNight.mjs
@@ -4,7 +4,8 @@ import { createTheme } from './theme-helper.mjs';
 export const settings = {
   background: '#1a1b26',
   lineBackground: '#1a1b2699',
-  foreground: '#787c99',
+  foreground: '#f8fcf9',
+  muted: '#f8fcf950',
   caret: '#c0caf5',
   selection: '#515c7e40',
   selectionMatch: '#16161e',
@@ -18,7 +19,8 @@ export default createTheme({
   theme: 'dark',
   settings: {
     background: '#1a1b26',
-    foreground: '#787c99',
+    foreground: '#f8fcf9',
+    muted: '#f8fcf950',
     caret: '#c0caf5',
     selection: '#515c7e40',
     selectionMatch: '#16161e',
diff --git a/packages/codemirror/themes/tokyoNightDay.mjs b/packages/codemirror/themes/tokyoNightDay.mjs
index 1cd58a412..a8f5f75b0 100644
--- a/packages/codemirror/themes/tokyoNightDay.mjs
+++ b/packages/codemirror/themes/tokyoNightDay.mjs
@@ -6,6 +6,7 @@ export const settings = {
   background: '#e1e2e7',
   lineBackground: '#e1e2e799',
   foreground: '#3760bf',
+  muted: '#3760bf50',
   caret: '#3760bf',
   selection: '#99a7df',
   selectionMatch: '#99a7df',
@@ -20,6 +21,7 @@ export default createTheme({
   settings: {
     background: '#e1e2e7',
     foreground: '#3760bf',
+    muted: '#3760bf50',
     caret: '#3760bf',
     selection: '#99a7df',
     selectionMatch: '#99a7df',
diff --git a/packages/codemirror/themes/vscodeDark.mjs b/packages/codemirror/themes/vscodeDark.mjs
index 703790fd5..9ccc4d078 100644
--- a/packages/codemirror/themes/vscodeDark.mjs
+++ b/packages/codemirror/themes/vscodeDark.mjs
@@ -5,6 +5,7 @@ export const settings = {
   background: '#1e1e1e',
   lineBackground: '#1e1e1e99',
   foreground: '#fff',
+  muted: '#ffffff50',
   caret: '#c6c6c6',
   selection: '#6199ff2f',
   selectionMatch: '#72a1ff59',
@@ -19,6 +20,7 @@ export default createTheme({
   settings: {
     background: '#1e1e1e',
     foreground: '#fff',
+    muted: '#ffffff50',
     caret: '#c6c6c6',
     selection: '#6199ff2f',
     selectionMatch: '#72a1ff59',
diff --git a/packages/codemirror/themes/vscodeLight.mjs b/packages/codemirror/themes/vscodeLight.mjs
index 9a7345114..71817e8a6 100644
--- a/packages/codemirror/themes/vscodeLight.mjs
+++ b/packages/codemirror/themes/vscodeLight.mjs
@@ -5,6 +5,7 @@ export const settings = {
   background: '#ffffff',
   lineBackground: '#ffffff50',
   foreground: '#383a42',
+  muted: '#383a4250',
   caret: '#000',
   selection: '#add6ff',
   selectionMatch: '#a8ac94',
@@ -20,6 +21,7 @@ export default createTheme({
   settings: {
     background: '#ffffff',
     foreground: '#383a42',
+    muted: '#383a4250',
     caret: '#000',
     selection: '#add6ff',
     selectionMatch: '#a8ac94',
diff --git a/packages/codemirror/themes/whitescreen.mjs b/packages/codemirror/themes/whitescreen.mjs
index a2937c380..fa034fb80 100644
--- a/packages/codemirror/themes/whitescreen.mjs
+++ b/packages/codemirror/themes/whitescreen.mjs
@@ -2,7 +2,8 @@ import { tags as t } from '@lezer/highlight';
 import { createTheme } from './theme-helper.mjs';
 export const settings = {
   background: 'white',
-  foreground: 'black', // whats that?
+  foreground: 'black',
+  muted: '#00000050',
   caret: 'black',
   selection: 'rgba(128, 203, 196, 0.5)',
   selectionMatch: '#ffffff26',
diff --git a/packages/codemirror/themes/xcodeLight.mjs b/packages/codemirror/themes/xcodeLight.mjs
index 8977c133e..b2c857988 100644
--- a/packages/codemirror/themes/xcodeLight.mjs
+++ b/packages/codemirror/themes/xcodeLight.mjs
@@ -6,6 +6,7 @@ export const settings = {
   background: '#fff',
   lineBackground: '#ffffff99',
   foreground: '#3D3D3D',
+  muted: '#3D3D3D50',
   selection: '#BBDFFF',
   selectionMatch: '#BBDFFF',
   gutterBackground: '#fff',
@@ -18,6 +19,7 @@ export default createTheme({
   settings: {
     background: '#fff',
     foreground: '#3D3D3D',
+    muted: '#3D3D3D50',
     selection: '#BBDFFF',
     selectionMatch: '#BBDFFF',
     gutterBackground: '#fff',
diff --git a/packages/core/controls.mjs b/packages/core/controls.mjs
index 834d963c3..291cfa9e6 100644
--- a/packages/core/controls.mjs
+++ b/packages/core/controls.mjs
@@ -99,7 +99,7 @@ export function registerMultiControl(names, maxControls, ...aliases) {
  * separated by ':'.
  *
  * @name s
- * @tags samples
+ * @tags superdough, samples
  * @param {string | Pattern} sound The sound / pattern of sounds to pick
  * @synonyms sound
  * @example
@@ -114,7 +114,7 @@ export const { s, sound } = registerControl(['s', 'n', 'gain'], 'sound');
  * Position in the wavetable of the wavetable oscillator
  *
  * @name wt
- * @tags fx
+ * @tags wavetable, superdough
  * @param {number | Pattern} position Position in the wavetable from 0 to 1
  * @synonyms wavetablePosition
  * @example
@@ -126,7 +126,7 @@ export const { wt, wavetablePosition } = registerControl('wt', 'wavetablePositio
  * Amount of envelope applied wavetable oscillator's position envelope
  *
  * @name wtenv
- * @tags fx
+ * @tags wavetable, envelope, superdough
  * @param {number | Pattern} amount between 0 and 1
  */
 export const { wtenv } = registerControl('wtenv');
@@ -134,7 +134,7 @@ export const { wtenv } = registerControl('wtenv');
  * Attack time of the wavetable oscillator's position envelope
  *
  * @name wtattack
- * @tags fx
+ * @tags wavetable, envelope, superdough
  * @synonyms wtatt
  * @param {number | Pattern} time attack time in seconds
  */
@@ -144,7 +144,7 @@ export const { wtattack, wtatt } = registerControl('wtattack', 'wtatt');
  * Decay time of the wavetable oscillator's position envelope
  *
  * @name wtdecay
- * @tags fx
+ * @tags wavetable, envelope, superdough
  * @synonyms wtdec
  * @param {number | Pattern} time decay time in seconds
  */
@@ -154,7 +154,7 @@ export const { wtdecay, wtdec } = registerControl('wtdecay', 'wtdec');
  * Sustain time of the wavetable oscillator's position envelope
  *
  * @name wtsustain
- * @tags fx
+ * @tags wavetable, envelope, superdough
  * @synonyms wtsus
  * @param {number | Pattern} gain sustain level (0 to 1)
  */
@@ -164,7 +164,7 @@ export const { wtsustain, wtsus } = registerControl('wtsustain', 'wtsus');
  * Release time of the wavetable oscillator's position envelope
  *
  * @name wtrelease
- * @tags fx
+ * @tags wavetable, envelope, superdough
  * @synonyms wtrel
  * @param {number | Pattern} time release time in seconds
  */
@@ -174,7 +174,7 @@ export const { wtrelease, wtrel } = registerControl('wtrelease', 'wtrel');
  * Rate of the LFO for the wavetable oscillator's position
  *
  * @name wtrate
- * @tags fx
+ * @tags wavetable, lfo, superdough
  * @param {number | Pattern} rate rate in hertz
  */
 export const { wtrate } = registerControl('wtrate');
@@ -182,7 +182,7 @@ export const { wtrate } = registerControl('wtrate');
  * cycle synced rate of the LFO for the wavetable oscillator's position
  *
  * @name wtsync
- * @tags fx
+ * @tags wavetable, lfo, superdough
  * @param {number | Pattern} rate rate in cycles
  */
 export const { wtsync } = registerControl('wtsync');
@@ -191,7 +191,7 @@ export const { wtsync } = registerControl('wtsync');
  * Depth of the LFO for the wavetable oscillator's position
  *
  * @name wtdepth
- * @tags fx
+ * @tags wavetable, lfo, superdough
  * @param {number | Pattern} depth depth of modulation
  */
 export const { wtdepth } = registerControl('wtdepth');
@@ -200,7 +200,7 @@ export const { wtdepth } = registerControl('wtdepth');
  * Shape of the LFO for the wavetable oscillator's position
  *
  * @name wtshape
- * @tags fx
+ * @tags wavetable, lfo, superdough
  * @param {number | Pattern} shape Shape of the lfo (0, 1, 2, ..)
  */
 export const { wtshape } = registerControl('wtshape');
@@ -209,7 +209,7 @@ export const { wtshape } = registerControl('wtshape');
  * DC offset of the LFO for the wavetable oscillator's position
  *
  * @name wtdc
- * @tags fx
+ * @tags wavetable, lfo, superdough
  * @param {number | Pattern} dcoffset dc offset. set to 0 for unipolar
  */
 export const { wtdc } = registerControl('wtdc');
@@ -218,7 +218,7 @@ export const { wtdc } = registerControl('wtdc');
  * Skew of the LFO for the wavetable oscillator's position
  *
  * @name wtskew
- * @tags fx
+ * @tags wavetable, lfo, superdough
  * @param {number | Pattern} skew How much to bend the LFO shape
  */
 export const { wtskew } = registerControl('wtskew');
@@ -227,7 +227,7 @@ export const { wtskew } = registerControl('wtskew');
  * Amount of warp (alteration of the waveform) to apply to the wavetable oscillator
  *
  * @name warp
- * @tags fx
+ * @tags wavetable, superdough
  * @param {number | Pattern} amount Warp of the wavetable from 0 to 1
  * @synonyms wavetableWarp
  * @example
@@ -240,7 +240,7 @@ export const { warp, wavetableWarp } = registerControl('warp', 'wavetableWarp');
  * Attack time of the wavetable oscillator's warp envelope
  *
  * @name warpattack
- * @tags fx
+ * @tags wavetable, envelope, superdough
  * @synonyms warpatt
  * @param {number | Pattern} time attack time in seconds
  */
@@ -250,7 +250,7 @@ export const { warpattack, warpatt } = registerControl('warpattack', 'warpatt');
  * Decay time of the wavetable oscillator's warp envelope
  *
  * @name warpdecay
- * @tags fx
+ * @tags wavetable, envelope, superdough
  * @synonyms warpdec
  * @param {number | Pattern} time decay time in seconds
  */
@@ -260,7 +260,7 @@ export const { warpdecay, warpdec } = registerControl('warpdecay', 'warpdec');
  * Sustain time of the wavetable oscillator's warp envelope
  *
  * @name warpsustain
- * @tags fx
+ * @tags wavetable, envelope, superdough
  * @synonyms warpsus
  * @param {number | Pattern} gain sustain level (0 to 1)
  */
@@ -270,7 +270,7 @@ export const { warpsustain, warpsus } = registerControl('warpsustain', 'warpsus'
  * Release time of the wavetable oscillator's warp envelope
  *
  * @name warprelease
- * @tags fx
+ * @tags wavetable, envelope, superdough
  * @synonyms warprel
  * @param {number | Pattern} time release time in seconds
  */
@@ -280,7 +280,7 @@ export const { warprelease, warprel } = registerControl('warprelease', 'warprel'
  * Rate of the LFO for the wavetable oscillator's warp
  *
  * @name warprate
- * @tags fx
+ * @tags wavetable, lfo, superdough
  * @param {number | Pattern} rate rate in hertz
  */
 export const { warprate } = registerControl('warprate');
@@ -289,7 +289,7 @@ export const { warprate } = registerControl('warprate');
  * Depth of the LFO for the wavetable oscillator's warp
  *
  * @name warpdepth
- * @tags fx
+ * @tags wavetable, lfo, superdough
  * @param {number | Pattern} depth depth of modulation
  */
 export const { warpdepth } = registerControl('warpdepth');
@@ -298,7 +298,7 @@ export const { warpdepth } = registerControl('warpdepth');
  * Shape of the LFO for the wavetable oscillator's warp
  *
  * @name warpshape
- * @tags fx
+ * @tags wavetable, lfo, superdough
  * @param {number | Pattern} shape Shape of the lfo (0, 1, 2, ..)
  */
 export const { warpshape } = registerControl('warpshape');
@@ -307,7 +307,7 @@ export const { warpshape } = registerControl('warpshape');
  * DC offset of the LFO for the wavetable oscillator's warp
  *
  * @name warpdc
- * @tags fx
+ * @tags wavetable, lfo, superdough
  * @param {number | Pattern} dcoffset dc offset. set to 0 for unipolar
  */
 export const { warpdc } = registerControl('warpdc');
@@ -316,7 +316,7 @@ export const { warpdc } = registerControl('warpdc');
  * Skew of the LFO for the wavetable oscillator's warp
  *
  * @name warpskew
- * @tags fx
+ * @tags wavetable, lfo, superdough
  * @param {number | Pattern} skew How much to bend the LFO shape
  */
 export const { warpskew } = registerControl('warpskew');
@@ -328,7 +328,7 @@ export const { warpskew } = registerControl('warpskew');
  * spin, chaos, primes, binary, brownian, reciprocal, wormhole, logistic, sigmoid, fractal, flip
  *
  * @name warpmode
- * @tags fx
+ * @tags wavetable, superdough
  * @param {number | string | Pattern} mode Warp mode
  * @synonyms wavetableWarpMode
  * @example
@@ -342,7 +342,7 @@ export const { warpmode, wavetableWarpMode } = registerControl('warpmode', 'wave
  * Amount of randomness of the initial phase of the wavetable oscillator.
  *
  * @name wtphaserand
- * @tags fx
+ * @tags wavetable, superdough
  * @param {number | Pattern} amount Randomness of the initial phase. Between 0 (not random) and 1 (fully random)
  * @synonyms wavetablePhaseRand
  * @example
@@ -355,7 +355,7 @@ export const { wtphaserand, wavetablePhaseRand } = registerControl('wtphaserand'
  * Amount of envelope applied wavetable oscillator's position envelope
  *
  * @name warpenv
- * @tags fx
+ * @tags wavetable, envelope, superdough
  * @param {number | Pattern} amount between 0 and 1
  */
 export const { warpenv } = registerControl('warpenv');
@@ -364,7 +364,7 @@ export const { warpenv } = registerControl('warpenv');
  * cycle synced rate of the LFO for the wavetable warp position
  *
  * @name warpsync
- * @tags fx
+ * @tags wavetable, lfo, superdough
  * @param {number | Pattern} rate rate in cycles
  */
 export const { warpsync } = registerControl('warpsync');
@@ -381,12 +381,13 @@ export const { warpsync } = registerControl('warpsync');
  */
 export const { source, src } = registerControl('source', 'src');
 /**
- * Selects the given index from the sample map.
- * Numbers too high will wrap around.
- * `n` can also be used to play midi numbers, but it is recommended to use `note` instead.
+ * Selects the given index:
+ *  - for samples, it picks the sample by index, with wrap around
+ *  - for scales, it picks the scale degree
+ *  - for voicings, it picks the voice index
  *
  * @name n
- * @tags samples
+ * @tags superdough, samples, tonal
  * @param {number | Pattern} value sample index starting from 0
  * @example
  * s("bd sd [~ bd] sd,hh*6").n("<0 1>")
@@ -405,7 +406,7 @@ export const { n } = registerControl('n');
  * You can also use midi numbers instead of note names, where 69 is mapped to A4 440Hz in 12EDO.
  *
  * @name note
- * @tags music_theory
+ * @tags tonal
  * @example
  * note("c a f e")
  * @example
@@ -433,7 +434,7 @@ export const { accelerate } = registerControl('accelerate');
  * Sets the velocity from 0 to 1. Is multiplied together with gain.
  *
  * @name velocity
- * @tags fx, superdough, supradough
+ * @tags amplitude, superdough, supradough
  * @synonyms vel
  * @example
  * s("hh*8")
@@ -445,7 +446,7 @@ export const { velocity, vel } = registerControl('velocity', 'vel');
  * Controls the gain by an exponential amount.
  *
  * @name gain
- * @tags fx, superdough, supradough
+ * @tags amplitude, superdough, supradough
  * @param {number | Pattern} amount gain.
  * @example
  * s("hh*8").gain(".4!2 1 .4!2 1 .4 1").fast(2)
@@ -456,7 +457,7 @@ export const { gain } = registerControl('gain');
  * Gain applied after all effects have been processed.
  *
  * @name postgain
- * @tags fx, superdough, supradough
+ * @tags amplitude, superdough, supradough
  * @example
  * s("bd sd [~ bd] sd,hh*8")
  * .compressor("-20:20:10:.002:.02").postgain(1.5)
@@ -467,7 +468,7 @@ export const { postgain } = registerControl('postgain');
  * Like `gain`, but linear.
  *
  * @name amp
- * @tags fx, superdirt
+ * @tags amplitude, superdirt
  * @param {number | Pattern} amount gain.
  * @superdirtOnly
  * @example
@@ -475,18 +476,6 @@ export const { postgain } = registerControl('postgain');
  *
  */
 export const { amp } = registerControl('amp');
-/**
- * Amplitude envelope attack time: Specifies how long it takes for the sound to reach its peak value, relative to the onset.
- *
- * @name attack
- * @tags fx, superdough, supradough
- * @param {number | Pattern} attack time in seconds.
- * @synonyms att
- * @example
- * note("c3 e3 f3 g3").attack("<0 .1 .5>")
- *
- */
-export const { attack, att } = registerControl('attack', 'att');
 
 /**
  * Sets the Frequency Modulation Harmonicity Ratio.
@@ -498,7 +487,7 @@ export const { attack, att } = registerControl('attack', 'att');
  * any of the 8 individual FMs (e.g. `fmh2`)
  *
  * @name fmh
- * @tags fx, superdough, supradough
+ * @tags fm, superdough, supradough
  * @param {number | Pattern} harmonicity
  * @example
  * note("c e g b g e")
@@ -519,7 +508,7 @@ export const { fmh, fmh1, fmh2, fmh3, fmh4, fmh5, fmh6, fmh7, fmh8 } = registerM
  * `fm3`
  *
  * @name fmi
- * @tags fx, superdough, supradough
+ * @tags fm, superdough, supradough
  * @param {number | Pattern} brightness modulation index
  * @synonyms fm
  * @example
@@ -543,8 +532,9 @@ export const { fmi, fmi1, fmi2, fmi3, fmi4, fmi5, fmi6, fmi7, fmi8, fm, fm1, fm2
  * any of the 8 individual FMs (e.g. `fmenv4`)
  *
  * @name fmenv
- * @tags fx, superdough, supradough
+ * @tags fm, envelope, superdough, supradough
  * @param {number | Pattern} type lin | exp
+ * @synonyms fme
  * @example
  * note("c e g b g e")
  * .fm(4)
@@ -554,9 +544,10 @@ export const { fmi, fmi1, fmi2, fmi3, fmi4, fmi5, fmi6, fmi7, fmi8, fm, fm1, fm2
  * ._scope()
  *
  */
-export const { fmenv, fmenv1, fmenv2, fmenv3, fmenv4, fmenv5, fmenv6, fmenv7, fmenv8 } = registerMultiControl(
+export const { fmenv, fmenv1, fmenv2, fmenv3, fmenv4, fmenv5, fmenv6, fmenv7, fmenv8, fme } = registerMultiControl(
   'fmenv',
   8,
+  'fme',
 );
 
 /**
@@ -566,9 +557,10 @@ export const { fmenv, fmenv1, fmenv2, fmenv3, fmenv4, fmenv5, fmenv6, fmenv7, fm
  * any of the 8 individual FMs (e.g. `fmatt5`)
  *
  * @name fmattack
- * @tags fx, superdough, supradough
+ * @tags fm, envelope, superdough, supradough
  * @synonyms fmatt
  * @param {number | Pattern} time attack time
+ * @synonyms fmatt
  * @example
  * note("c e g b g e")
  * .fm(4)
@@ -604,7 +596,7 @@ export const {
  * any of the 8 individual FMs (e.g. `fmwave6`)
  *
  * @name fmwave
- * @tags fx, superdough, supradough
+ * @tags fm, superdough, supradough
  * @param {number | Pattern} wave waveform
  * @example
  * n("0 1 2 3".fast(4)).scale("d:minor").s("sine").fmwave("<sine square sawtooth crackle>").fm(4).fmh(2.01)
@@ -624,9 +616,10 @@ export const { fmwave, fmwave1, fmwave2, fmwave3, fmwave4, fmwave5, fmwave6, fmw
  * any of the 8 individual FMs (e.g. `fmdec6`)
  *
  * @name fmdecay
- * @tags fx, superdough, supradough
+ * @tags fm, envelope, superdough, supradough
  * @synonyms fmdec
  * @param {number | Pattern} time decay time
+ * @synonyms fmdec
  * @example
  * note("c e g b g e")
  * .fm(4)
@@ -663,9 +656,10 @@ export const {
  * any of the 8 individual FMs (e.g. `fmsus7`)
  *
  * @name fmsustain
- * @tags fx, superdough, supradough
+ * @tags fm, envelope, superdough, supradough
  * @synonyms fmsus
  * @param {number | Pattern} level sustain level
+ * @synonyms fmsus
  * @example
  * note("c e g b g e")
  * .fm(4)
@@ -702,7 +696,7 @@ export const {
  * any of the 8 individual FMs (e.g. `fmrel8`)
  *
  * @name fmrelease
- * @tags fx, superdough, supradough
+ * @tags fm, envelope, superdough, supradough
  * @synonyms fmrel
  * @param {number | Pattern} time release time
  *
@@ -755,7 +749,7 @@ export const { bank } = registerControl('bank');
  * mix control for the chorus effect
  *
  * @name chorus
- * @tags fx
+ * @tags pitch
  * @param {string | Pattern} chorus mix amount between 0 and 1
  * @example
  * note("d d a# a").s("sawtooth").chorus(.5)
@@ -768,12 +762,25 @@ export const { analyze } = registerControl('analyze');
 // fftSize of analyser
 export const { fft } = registerControl('fft');
 
+/**
+ * Amplitude envelope attack time: Specifies how long it takes for the sound to reach its peak value, relative to the onset.
+ *
+ * @name attack
+ * @tags amplitude, envelope, superdough, supradough
+ * @param {number | Pattern} attack time in seconds.
+ * @synonyms att
+ * @example
+ * note("c3 e3 f3 g3").attack("<0 .1 .5>")
+ *
+ */
+export const { attack, att } = registerControl('attack', 'att');
+
 /**
  * Amplitude envelope decay time: the time it takes after the attack time to reach the sustain level.
  * Note that the decay is only audible if the sustain value is lower than 1.
  *
  * @name decay
- * @tags fx, superdough, supradough
+ * @tags amplitude, envelope, superdough, supradough
  * @param {number | Pattern} time decay time in seconds
  * @synonyms dec
  * @example
@@ -785,7 +792,7 @@ export const { decay, dec } = registerControl('decay', 'dec');
  * Amplitude envelope sustain level: The level which is reached after attack / decay, being sustained until the offset.
  *
  * @name sustain
- * @tags fx, superdough, supradough
+ * @tags amplitude, envelope, superdough, supradough
  * @param {number | Pattern} gain sustain level between 0 and 1
  * @synonyms sus
  * @example
@@ -797,7 +804,7 @@ export const { sustain, sus } = registerControl('sustain', 'sus');
  * Amplitude envelope release time: The time it takes after the offset to go from sustain level to zero.
  *
  * @name release
- * @tags fx, superdough, supradough
+ * @tags amplitude, envelope, superdough, supradough
  * @param {number | Pattern} time release time in seconds
  * @synonyms rel
  * @example
@@ -812,7 +819,7 @@ export const { hold } = registerControl('hold');
  * can also optionally supply the 'bpq' parameter separated by ':'.
  *
  * @name bpf
- * @tags fx, superdough, supradough
+ * @tags filter, superdough, supradough
  * @param {number | Pattern} frequency center frequency
  * @synonyms bandf, bp
  * @example
@@ -825,7 +832,7 @@ export const { bandf, bpf, bp } = registerControl(['bandf', 'bandq', 'bpenv'], '
  * Sets the **b**and-**p**ass **q**-factor (resonance).
  *
  * @name bpq
- * @tags fx, superdough, supradough
+ * @tags filter, superdough, supradough
  * @param {number | Pattern} q q factor
  * @synonyms bandq
  * @example
@@ -838,7 +845,6 @@ export const { bandq, bpq } = registerControl('bandq', 'bpq');
 /**
  * A pattern of numbers from 0 to 1. Skips the beginning of each sample, e.g. `0.25` to cut off the first quarter from each sample.
  *
- * @memberof Pattern
  * @name begin
  * @tags samples
  * @param {number | Pattern} amount between 0 and 1, where 1 is the length of the sample
@@ -905,7 +911,7 @@ export const { loopEnd, loope } = registerControl('loopEnd', 'loope');
  * Bit crusher effect.
  *
  * @name crush
- * @tags fx, superdough, supradough
+ * @tags superdough, supradough
  * @param {number | Pattern} depth between 1 (for drastic reduction in bit-depth) to 16 (for barely no reduction).
  * @example
  * s("<bd sd>,hh*3").fast(2).crush("<16 8 7 6 5 4 3 2>")
@@ -917,7 +923,7 @@ export const { crush } = registerControl('crush');
  * Fake-resampling for lowering the sample rate. Caution: This effect seems to only work in chromium based browsers
  *
  * @name coarse
- * @tags fx, superdough, supradough
+ * @tags superdough, supradough
  * @param {number | Pattern} factor 1 for original 2 for half, 3 for a third and so on.
  * @example
  * s("bd sd [~ bd] sd,hh*8").coarse("<1 4 8 16 32>")
@@ -929,7 +935,7 @@ export const { coarse } = registerControl('coarse');
  * Modulate the amplitude of a sound with a continuous waveform
  *
  * @name tremolo
- * @tags fx, superdough
+ * @tags amplitude, lfo, superdough
  * @synonyms trem
  * @param {number | Pattern} speed modulation speed in HZ
  * @example
@@ -942,7 +948,7 @@ export const { tremolo, trem } = registerControl(['tremolo', 'tremolodepth', 'tr
  * Modulate the amplitude of a sound with a continuous waveform
  *
  * @name tremolosync
- * @tags fx, superdough
+ * @tags amplitude, lfo, superdough
  * @synonyms tremsync
  * @param {number | Pattern} cycles modulation speed in cycles
  * @example
@@ -958,7 +964,7 @@ export const { tremolosync } = registerControl(
  * Depth of amplitude modulation
  *
  * @name tremolodepth
- * @tags fx, superdough
+ * @tags amplitude, lfo, superdough
  * @synonyms tremdepth
  * @param {number | Pattern} depth
  * @example
@@ -970,7 +976,7 @@ export const { tremolodepth } = registerControl('tremolodepth', 'tremdepth');
  * Alter the shape of the modulation waveform
  *
  * @name tremoloskew
- * @tags fx, superdough
+ * @tags amplitude, lfo, superdough
  * @synonyms tremskew
  * @param {number | Pattern} amount between 0 & 1, the shape of the waveform
  * @example
@@ -983,7 +989,7 @@ export const { tremoloskew } = registerControl('tremoloskew', 'tremskew');
  * Alter the phase of the modulation waveform
  *
  * @name tremolophase
- * @tags fx, superdough
+ * @tags amplitude, lfo, superdough
  * @synonyms tremphase
  * @param {number | Pattern} offset the offset in cycles of the modulation
  * @example
@@ -996,7 +1002,7 @@ export const { tremolophase } = registerControl('tremolophase', 'tremphase');
  * Shape of amplitude modulation
  *
  * @name tremoloshape
- * @tags fx, superdough
+ * @tags amplitude, lfo, superdough
  * @synonyms tremshape
  * @param {number | Pattern} shape tri | square | sine | saw | ramp
  * @example
@@ -1008,7 +1014,7 @@ export const { tremoloshape } = registerControl('tremoloshape', 'tremshape');
  * Filter overdrive for supported filter types
  *
  * @name drive
- * @tags fx, superdough
+ * @tags filter, superdough
  * @param {number | Pattern} amount
  * @example
  * note("{f g g c d a a#}%16".sub(17)).s("supersaw").lpenv(8).lpf(150).lpq(.8).ftype('ladder').drive("<.5 4>")
@@ -1022,7 +1028,7 @@ export const { drive } = registerControl('drive');
  * Can be applied to multiple orbits with the ':' mininotation, e.g. `duckorbit("2:3")`
  *
  * @name duckorbit
- * @tags fx, superdough
+ * @tags amplitude, orbit, superdough
  * @synonyms duck
  * @param {number | Pattern} orbit target orbit
  * @example
@@ -1043,7 +1049,7 @@ export const { duck } = registerControl('duckorbit', 'duck');
  * Note: this requires first applying the effect to multiple orbits with e.g. `duckorbit("2:3")`.
  *
  * @name duckdepth
- * @tags fx, superdough
+ * @tags amplitude, orbit, superdough
  * @param {number | Pattern} depth depth of modulation from 0 to 1
  * @example
  * stack( n(run(8)).scale("c:minor").s("sawtooth").delay(.7).orbit(2), s("bd:4!4").beat("0,4,8,11,14",16).duckorbit(2).duckattack(0.2).duckdepth("<1 .9 .6 0>"))
@@ -1063,7 +1069,7 @@ export const { duckdepth } = registerControl('duckdepth');
  * Note: this requires first applying the effect to multiple orbits with e.g. `duckorbit("2:3")`.
  *
  * @name duckonset
- * @tags fx, superdough
+ * @tags amplitude, envelope, orbit, superdough
  * @synonyms duckons
  *
  * @param {number | Pattern} time The onset time in seconds
@@ -1091,8 +1097,8 @@ export const { duckonset } = registerControl('duckonset', 'duckons');
  * Note: this requires first applying the effect to multiple orbits with e.g. `duckorbit("2:3")`.
  *
  * @name duckattack
- * @tags fx, superdough
- * @synonyms duckatt
+ * @tags amplitude, envelope, orbit, superdough
+ * @synonyms duckatt, datt
  *
  * @param {number | Pattern} time The attack time in seconds
  * @example
@@ -1104,28 +1110,28 @@ export const { duckonset } = registerControl('duckonset', 'duckons');
  * ducker: s("bd:4!4").beat("0,4,8,11,14",16).duckorbit("2:5").duckattack("0.4:0.1")
  *
  */
-export const { duckattack } = registerControl('duckattack', 'duckatt');
+export const { duckattack } = registerControl('duckattack', 'duckatt', 'datt');
 
 /**
  * Create byte beats with custom expressions
  *
  * @name byteBeatExpression
- * @synonyms bbexpr
- * @tags fx
+ * @synonyms bbexpr, bb
+ * @tags superdough
  *
  * @param {number | Pattern} byteBeatExpression bitwise expression for creating bytebeat
  * @example
  * s("bytebeat").bbexpr('t*(t>>15^t>>66)')
  *
  */
-export const { byteBeatExpression, bbexpr } = registerControl('byteBeatExpression', 'bbexpr');
+export const { byteBeatExpression, bbexpr } = registerControl('byteBeatExpression', 'bbexpr', 'bb');
 
 /**
  * Create byte beats with custom expressions
  *
  * @name byteBeatStartTime
  * @synonyms bbst
- * @tags fx
+ * @tags superdough
  *
  * @param {number | Pattern} byteBeatStartTime in samples (t)
  * @example
@@ -1138,7 +1144,7 @@ export const { byteBeatStartTime, bbst } = registerControl('byteBeatStartTime',
  * Allows you to set the output channels on the interface
  *
  * @name channels
- * @tags external_io
+ * @tags external_io, superdough
  * @synonyms ch
  *
  * @param {number | Pattern} channels pattern the output channels
@@ -1152,7 +1158,7 @@ export const { channels, ch } = registerControl('channels', 'ch');
  * Controls the pulsewidth of the pulse oscillator
  *
  * @name pw
- * @tags fx
+ * @tags superdough
  * @param {number | Pattern} pulsewidth
  * @example
  * note("{f a c e}%16").s("pulse").pw(".8:1:.2")
@@ -1165,32 +1171,34 @@ export const { pw } = registerControl(['pw', 'pwrate', 'pwsweep']);
  * Controls the lfo rate for the pulsewidth of the pulse oscillator
  *
  * @name pwrate
- * @tags fx
+ * @synonyms pwr
+ * @tags superdough, lfo
  * @param {number | Pattern} rate
  * @example
  * n(run(8)).scale("D:pentatonic").s("pulse").pw("0.5").pwrate("<5 .1 25>").pwsweep("<0.3 .8>")
 
  *
  */
-export const { pwrate } = registerControl('pwrate');
+export const { pwrate } = registerControl('pwrate', 'pwr');
 
 /**
  * Controls the lfo sweep for the pulsewidth of the pulse oscillator
  *
  * @name pwsweep
- * @tags fx
+ * @synonyms pws
+ * @tags superdough, lfo
  * @param {number | Pattern} sweep
  * @example
  * n(run(8)).scale("D:pentatonic").s("pulse").pw("0.5").pwrate("<5 .1 25>").pwsweep("<0.3 .8>")
  *
  */
-export const { pwsweep } = registerControl('pwsweep');
+export const { pwsweep } = registerControl('pwsweep', 'pws');
 
 /**
  * Phaser audio effect that approximates popular guitar pedals.
  *
  * @name phaser
- * @tags fx, superdough
+ * @tags superdough
  * @synonyms ph
  * @param {number | Pattern} speed speed of modulation
  * @example
@@ -1208,7 +1216,7 @@ export const { phaserrate, ph, phaser } = registerControl(
  * The frequency sweep range of the lfo for the phaser effect. Defaults to 2000
  *
  * @name phasersweep
- * @tags fx, superdough
+ * @tags superdough, lfo
  * @synonyms phs
  * @param {number | Pattern} phasersweep most useful values are between 0 and 4000
  * @example
@@ -1222,7 +1230,7 @@ export const { phasersweep, phs } = registerControl('phasersweep', 'phs');
  * The center frequency of the phaser in HZ. Defaults to 1000
  *
  * @name phasercenter
- * @tags fx, superdough
+ * @tags superdough
  * @synonyms phc
  * @param {number | Pattern} centerfrequency in HZ
  * @example
@@ -1237,7 +1245,7 @@ export const { phasercenter, phc } = registerControl('phasercenter', 'phc');
  * The amount the signal is affected by the phaser effect. Defaults to 0.75
  *
  * @name phaserdepth
- * @tags fx, superdough, superdirt
+ * @tags superdough, superdirt
  * @synonyms phd, phasdp
  * @param {number | Pattern} depth number between 0 and 1
  * @example
@@ -1249,10 +1257,10 @@ export const { phasercenter, phc } = registerControl('phasercenter', 'phc');
 export const { phaserdepth, phd, phasdp } = registerControl('phaserdepth', 'phd', 'phasdp');
 
 /**
- * Choose the channel the pattern is sent to in superdirt
+ * Choose the channel the pattern is sent to
  *
  * @name channel
- * @tags fx
+ * @tags superdough
  * @param {number | Pattern} channel channel number
  *
  */
@@ -1261,7 +1269,7 @@ export const { channel } = registerControl('channel');
  * In the style of classic drum-machines, `cut` will stop a playing sample as soon as another samples with in same cutgroup is to be played. An example would be an open hi-hat followed by a closed one, essentially muting the open.
  *
  * @name cut
- * @tags fx
+ * @tags superdough
  * @param {number | Pattern} group cut group number
  * @example
  * s("[oh hh]*4").cut(1)
@@ -1274,7 +1282,7 @@ export const { cut } = registerControl('cut');
  * When using mininotation, you can also optionally add the 'lpq' parameter, separated by ':'.
  *
  * @name lpf
- * @tags fx, superdough, supradough
+ * @tags filter, superdough, supradough
  * @param {number | Pattern} frequency audible between 0 and 20000
  * @synonyms cutoff, ctf, lp
  * @example
@@ -1288,7 +1296,7 @@ export const { cutoff, ctf, lpf, lp } = registerControl(['cutoff', 'resonance',
 /**
  * Sets the lowpass filter envelope modulation depth.
  * @name lpenv
- * @tags fx, superdough, supradough
+ * @tags filter, envelope, superdough, supradough
  * @param {number | Pattern} modulation depth of the lowpass filter envelope between 0 and _n_
  * @synonyms lpe
  * @example
@@ -1302,7 +1310,7 @@ export const { lpenv, lpe } = registerControl('lpenv', 'lpe');
 /**
  * Sets the highpass filter envelope modulation depth.
  * @name hpenv
- * @tags fx, superdough, supradough
+ * @tags filter, envelope, superdough, supradough
  * @param {number | Pattern} modulation depth of the highpass filter envelope between 0 and _n_
  * @synonyms hpe
  * @example
@@ -1316,7 +1324,7 @@ export const { hpenv, hpe } = registerControl('hpenv', 'hpe');
 /**
  * Sets the bandpass filter envelope modulation depth.
  * @name bpenv
- * @tags fx, superdough, supradough
+ * @tags filter, envelope, superdough, supradough
  * @param {number | Pattern} modulation depth of the bandpass filter envelope between 0 and _n_
  * @synonyms bpe
  * @example
@@ -1330,7 +1338,7 @@ export const { bpenv, bpe } = registerControl('bpenv', 'bpe');
 /**
  * Sets the attack duration for the lowpass filter envelope.
  * @name lpattack
- * @tags fx, superdough, supradough
+ * @tags filter, envelope, superdough, supradough
  * @param {number | Pattern} attack time of the filter envelope
  * @synonyms lpa
  * @example
@@ -1344,7 +1352,7 @@ export const { lpattack, lpa } = registerControl('lpattack', 'lpa');
 /**
  * Sets the attack duration for the highpass filter envelope.
  * @name hpattack
- * @tags fx, superdough, supradough
+ * @tags filter, envelope, superdough, supradough
  * @param {number | Pattern} attack time of the highpass filter envelope
  * @synonyms hpa
  * @example
@@ -1358,7 +1366,7 @@ export const { hpattack, hpa } = registerControl('hpattack', 'hpa');
 /**
  * Sets the attack duration for the bandpass filter envelope.
  * @name bpattack
- * @tags fx, superdough, supradough
+ * @tags filter, envelope, superdough, supradough
  * @param {number | Pattern} attack time of the bandpass filter envelope
  * @synonyms bpa
  * @example
@@ -1372,7 +1380,7 @@ export const { bpattack, bpa } = registerControl('bpattack', 'bpa');
 /**
  * Sets the decay duration for the lowpass filter envelope.
  * @name lpdecay
- * @tags fx, superdough, supradough
+ * @tags filter, envelope, superdough, supradough
  * @param {number | Pattern} decay time of the filter envelope
  * @synonyms lpd
  * @example
@@ -1386,7 +1394,7 @@ export const { lpdecay, lpd } = registerControl('lpdecay', 'lpd');
 /**
  * Sets the decay duration for the highpass filter envelope.
  * @name hpdecay
- * @tags fx, superdough, supradough
+ * @tags filter, envelope, superdough, supradough
  * @param {number | Pattern} decay time of the highpass filter envelope
  * @synonyms hpd
  * @example
@@ -1401,7 +1409,7 @@ export const { hpdecay, hpd } = registerControl('hpdecay', 'hpd');
 /**
  * Sets the decay duration for the bandpass filter envelope.
  * @name bpdecay
- * @tags fx, superdough, supradough
+ * @tags filter, envelope, superdough, supradough
  * @param {number | Pattern} decay time of the bandpass filter envelope
  * @synonyms bpd
  * @example
@@ -1416,7 +1424,7 @@ export const { bpdecay, bpd } = registerControl('bpdecay', 'bpd');
 /**
  * Sets the sustain amplitude for the lowpass filter envelope.
  * @name lpsustain
- * @tags fx, superdough, supradough
+ * @tags filter, envelope, superdough, supradough
  * @param {number | Pattern} sustain amplitude of the lowpass filter envelope
  * @synonyms lps
  * @example
@@ -1431,7 +1439,7 @@ export const { lpsustain, lps } = registerControl('lpsustain', 'lps');
 /**
  * Sets the sustain amplitude for the highpass filter envelope.
  * @name hpsustain
- * @tags fx, superdough, supradough
+ * @tags filter, envelope, superdough, supradough
  * @param {number | Pattern} sustain amplitude of the highpass filter envelope
  * @synonyms hps
  * @example
@@ -1446,7 +1454,7 @@ export const { hpsustain, hps } = registerControl('hpsustain', 'hps');
 /**
  * Sets the sustain amplitude for the bandpass filter envelope.
  * @name bpsustain
- * @tags fx, superdough, supradough
+ * @tags filter, envelope, superdough, supradough
  * @param {number | Pattern} sustain amplitude of the bandpass filter envelope
  * @synonyms bps
  * @example
@@ -1461,7 +1469,7 @@ export const { bpsustain, bps } = registerControl('bpsustain', 'bps');
 /**
  * Sets the release time for the lowpass filter envelope.
  * @name lprelease
- * @tags fx, superdough, supradough
+ * @tags filter, envelope, superdough, supradough
  * @param {number | Pattern} release time of the filter envelope
  * @synonyms lpr
  * @example
@@ -1477,7 +1485,7 @@ export const { lprelease, lpr } = registerControl('lprelease', 'lpr');
 /**
  * Sets the release time for the highpass filter envelope.
  * @name hprelease
- * @tags fx, superdough, supradough
+ * @tags filter, envelope, superdough, supradough
  * @param {number | Pattern} release time of the highpass filter envelope
  * @synonyms hpr
  * @example
@@ -1493,7 +1501,7 @@ export const { hprelease, hpr } = registerControl('hprelease', 'hpr');
 /**
  * Sets the release time for the bandpass filter envelope.
  * @name bprelease
- * @tags fx, superdough, supradough
+ * @tags filter, envelope, superdough, supradough
  * @param {number | Pattern} release time of the bandpass filter envelope
  * @synonyms bpr
  * @example
@@ -1509,7 +1517,7 @@ export const { bprelease, bpr } = registerControl('bprelease', 'bpr');
 /**
  * Sets the filter type. The ladder filter is more aggressive. More types might be added in the future.
  * @name ftype
- * @tags fx
+ * @tags filter, superdough
  * @param {number | Pattern} type 12db (0), ladder (1), or 24db (2)
  * @example
  * note("{f g g c d a a#}%8").s("sawtooth").lpenv(4).lpf(500).ftype("<0 1 2>").lpq(1)
@@ -1525,7 +1533,7 @@ export const { ftype } = registerControl('ftype');
 /**
  * controls the center of the filter envelope. 0 is unipolar positive, .5 is bipolar, 1 is unipolar negative
  * @name fanchor
- * @tags fx, superdough
+ * @tags filter, envelope, superdough
  * @param {number | Pattern} center 0 to 1
  * @example
  * note("{f g g c d a a#}%8").s("sawtooth").lpf("{1000}%2")
@@ -1538,7 +1546,7 @@ export const { fanchor } = registerControl('fanchor');
  * When using mininotation, you can also optionally add the 'hpq' parameter, separated by ':'.
  *
  * @name hpf
- * @tags fx, superdough, supradough
+ * @tags filter, superdough, supradough
  * @param {number | Pattern} frequency audible between 0 and 20000
  * @synonyms hp, hcutoff
  * @example
@@ -1554,7 +1562,7 @@ export const { fanchor } = registerControl('fanchor');
  * Rate of the LFO for the lowpass filter
  *
  * @name lprate
- * @tags fx, superdough
+ * @tags filter, lfo, superdough
  * @param {number | Pattern} rate rate in hertz
  * @example
  * note("<c c c# c c c4>*16").s("sawtooth").lpf(600).lprate("<4 8 2 1>")
@@ -1565,7 +1573,7 @@ export const { lprate } = registerControl('lprate');
  * Cycle-synced rate of the LFO for the lowpass filter
  *
  * @name lpsync
- * @tags fx, superdough
+ * @tags filter, lfo, superdough
  * @param {number | Pattern} rate rate in cycles
  * @example
  * note("<c c c# c c c4>*16").s("sawtooth").lpf(600).lpsync("<4 8 2 1>")
@@ -1576,7 +1584,7 @@ export const { lpsync } = registerControl('lpsync');
  * Depth of the LFO for the lowpass filter
  *
  * @name lpdepth
- * @tags fx, superdough
+ * @tags filter, lfo, superdough
  * @param {number | Pattern} depth depth of modulation
  * @example
  * note("<c c c# c c c4>*16").s("sawtooth").lpf(600).lpdepth("<1 .5 1.8 0>")
@@ -1587,7 +1595,7 @@ export const { lpdepth } = registerControl('lpdepth');
  * Depth of the LFO for the lowpass filter, in HZ
  *
  * @name lpdepthfrequency
- * @tags fx, superdough
+ * @tags filter, lfo, superdough
  * @synonyms lpdepthfreq
  * @param {number | Pattern} depth depth of modulation
  * @example
@@ -1600,7 +1608,7 @@ export const { lpdepthfrequency, lpdepthfreq } = registerControl('lpdepthfrequen
  * Shape of the LFO for the lowpass filter
  *
  * @name lpshape
- * @tags fx, superdough
+ * @tags filter, lfo, superdough
  * @param {number | Pattern} shape Shape of the lfo (0, 1, 2, ..)
  */
 export const { lpshape } = registerControl('lpshape');
@@ -1609,7 +1617,7 @@ export const { lpshape } = registerControl('lpshape');
  * DC offset of the LFO for the lowpass filter
  *
  * @name lpdc
- * @tags fx, superdough
+ * @tags filter, lfo, superdough
  * @param {number | Pattern} dcoffset dc offset. set to 0 for unipolar
  */
 export const { lpdc } = registerControl('lpdc');
@@ -1618,7 +1626,7 @@ export const { lpdc } = registerControl('lpdc');
  * Skew of the LFO for the lowpass filter
  *
  * @name lpskew
- * @tags fx, superdough
+ * @tags filter, lfo, superdough
  * @param {number | Pattern} skew How much to bend the LFO shape
  */
 export const { lpskew } = registerControl('lpskew');
@@ -1627,7 +1635,7 @@ export const { lpskew } = registerControl('lpskew');
  * Rate of the LFO for the bandpass filter
  *
  * @name bprate
- * @tags fx, superdough
+ * @tags filter, lfo, superdough
  * @param {number | Pattern} rate rate in hertz
  */
 export const { bprate } = registerControl('bprate');
@@ -1636,7 +1644,7 @@ export const { bprate } = registerControl('bprate');
  * Cycle-synced rate of the LFO for the bandpass filter
  *
  * @name bpsync
- * @tags fx, superdough
+ * @tags filter, lfo, superdough
  * @param {number | Pattern} rate rate in cycles
  */
 export const { bpsync } = registerControl('bpsync');
@@ -1645,7 +1653,7 @@ export const { bpsync } = registerControl('bpsync');
  * Depth of the LFO for the bandpass filter
  *
  * @name bpdepth
- * @tags fx, superdough
+ * @tags filter, lfo, superdough
  * @param {number | Pattern} depth depth of modulation
  */
 export const { bpdepth } = registerControl('bpdepth');
@@ -1654,7 +1662,7 @@ export const { bpdepth } = registerControl('bpdepth');
  * Depth of the LFO for the bandpass filter, in HZ
  *
  * @name bpdepthfrequency
- * @tags fx, superdough
+ * @tags filter, lfo, superdough
  * @synonyms bpdepthfreq
  * @param {number | Pattern} depth depth of modulation
  * @example
@@ -1667,7 +1675,7 @@ export const { bpdepthfrequency, bpdepthfreq } = registerControl('bpdepthfrequen
  * Shape of the LFO for the bandpass filter
  *
  * @name bpshape
- * @tags fx, superdough
+ * @tags filter, lfo, superdough
  * @param {number | Pattern} shape Shape of the lfo (0, 1, 2, ..)
  */
 export const { bpshape } = registerControl('bpshape');
@@ -1676,7 +1684,7 @@ export const { bpshape } = registerControl('bpshape');
  * DC offset of the LFO for the bandpass filter
  *
  * @name bpdc
- * @tags fx, superdough
+ * @tags filter, lfo, superdough
  * @param {number | Pattern} dcoffset dc offset. set to 0 for unipolar
  */
 export const { bpdc } = registerControl('bpdc');
@@ -1685,7 +1693,7 @@ export const { bpdc } = registerControl('bpdc');
  * Skew of the LFO for the bandpass filter
  *
  * @name bpskew
- * @tags fx, superdough
+ * @tags filter, lfo, superdough
  * @param {number | Pattern} skew How much to bend the LFO shape
  */
 export const { bpskew } = registerControl('bpskew');
@@ -1694,7 +1702,7 @@ export const { bpskew } = registerControl('bpskew');
  * Rate of the LFO for the highpass filter
  *
  * @name hprate
- * @tags fx, superdough
+ * @tags filter, lfo, superdough
  * @param {number | Pattern} rate rate in hertz
  */
 export const { hprate } = registerControl('hprate');
@@ -1703,7 +1711,7 @@ export const { hprate } = registerControl('hprate');
  * Cycle-synced rate of the LFO for the highpass filter
  *
  * @name hpsync
- * @tags fx, superdough
+ * @tags filter, lfo, superdough
  * @param {number | Pattern} rate rate in cycles
  */
 export const { hpsync } = registerControl('hpsync');
@@ -1712,7 +1720,7 @@ export const { hpsync } = registerControl('hpsync');
  * Depth of the LFO for the highpass filter
  *
  * @name hpdepth
- * @tags fx, superdough
+ * @tags filter, lfo, superdough
  * @param {number | Pattern} depth depth of modulation
  */
 export const { hpdepth } = registerControl('hpdepth');
@@ -1721,7 +1729,7 @@ export const { hpdepth } = registerControl('hpdepth');
  * Depth of the LFO for the hipass filter, in hz
  *
  * @name hpdepthfrequency
- * @tags fx, superdough
+ * @tags filter, lfo, superdough
  * @synonyms hpdepthfreq
  * @param {number | Pattern} depth depth of modulation
  * @example
@@ -1734,7 +1742,7 @@ export const { hpdepthfrequency, hpdepthfreq } = registerControl('hpdepthfrequen
  * Shape of the LFO for the highpass filter
  *
  * @name hpshape
- * @tags fx, superdough
+ * @tags filter, lfo, superdough
  * @param {number | Pattern} shape Shape of the lfo (0, 1, 2, ..)
  */
 export const { hpshape } = registerControl('hpshape');
@@ -1743,7 +1751,7 @@ export const { hpshape } = registerControl('hpshape');
  * DC offset of the LFO for the highpass filter
  *
  * @name hpdc
- * @tags fx, superdough
+ * @tags filter, lfo, superdough
  * @param {number | Pattern} dcoffset dc offset. set to 0 for unipolar
  */
 export const { hpdc } = registerControl('hpdc');
@@ -1752,7 +1760,7 @@ export const { hpdc } = registerControl('hpdc');
  * Skew of the LFO for the highpass filter
  *
  * @name hpskew
- * @tags fx, superdough
+ * @tags filter, lfo, superdough
  * @param {number | Pattern} skew How much to bend the LFO shape
  */
 export const { hpskew } = registerControl('hpskew');
@@ -1761,7 +1769,7 @@ export const { hpskew } = registerControl('hpskew');
  * Applies a vibrato to the frequency of the oscillator.
  *
  * @name vib
- * @tags fx, superdough, supradough
+ * @tags pitch, lfo, superdough, supradough
  * @synonyms vibrato, v
  * @param {number | Pattern} frequency of the vibrato in hertz
  * @example
@@ -1789,7 +1797,7 @@ export const { noise } = registerControl('noise');
  * Sets the vibrato depth in semitones. Only has an effect if `vibrato` | `vib` | `v` is is also set
  *
  * @name vibmod
- * @tags fx, superdough, supradough
+ * @tags pitch, lfo, superdough, supradough
  * @synonyms vmod
  * @param {number | Pattern} depth of vibrato (in semitones)
  * @example
@@ -1808,7 +1816,7 @@ export const { hcutoff, hpf, hp } = registerControl(['hcutoff', 'hresonance', 'h
  * Controls the **h**igh-**p**ass **q**-value.
  *
  * @name hpq
- * @tags fx, superdough, supradough
+ * @tags filter, superdough, supradough
  * @param {number | Pattern} q resonance factor between 0 and 50
  * @synonyms hresonance
  * @example
@@ -1820,7 +1828,7 @@ export const { hresonance, hpq } = registerControl('hresonance', 'hpq');
  * Controls the **l**ow-**p**ass **q**-value.
  *
  * @name lpq
- * @tags fx, superdough, supradough
+ * @tags filter, superdough, supradough
  * @param {number | Pattern} q resonance factor between 0 and 50
  * @synonyms resonance
  * @example
@@ -1833,7 +1841,7 @@ export const { resonance, lpq } = registerControl('resonance', 'lpq');
  * DJ filter, below 0.5 is low pass filter, above is high pass filter.
  *
  * @name djf
- * @tags fx, superdough
+ * @tags filter, superdough
  * @param {number | Pattern} cutoff below 0.5 is low pass filter, above is high pass filter
  * @example
  * n(irand(16).seg(8)).scale("d:phrygian").s("supersaw").djf("<.5 .3 .2 .75>")
@@ -1850,7 +1858,7 @@ export const { djf } = registerControl('djf');
  *
  *
  * @name delay
- * @tags fx, superdough, supradough
+ * @tags orbit, superdough, supradough
  * @param {number | Pattern} level between 0 and 1
  * @example
  * s("bd bd").delay("<0 .25 .5 1>")
@@ -1864,7 +1872,7 @@ export const { delay } = registerControl(['delay', 'delaytime', 'delayfeedback']
  * Caution: Values >= 1 will result in a signal that gets louder and louder! Don't do it
  *
  * @name delayfeedback
- * @tags fx, superdough, supradough
+ * @tags orbit, superdough, supradough
  * @param {number | Pattern} feedback between 0 and 1
  * @synonyms delayfb, dfb
  * @example
@@ -1878,7 +1886,7 @@ export const { delayfeedback, delayfb, dfb } = registerControl('delayfeedback',
  * Caution: Values >= 1 will result in a signal that gets louder and louder! Don't do it
  *
  * @name delayfeedback
- * @tags fx, superdough, supradough
+ * @tags orbit, superdough, supradough
  * @param {number | Pattern} feedback between 0 and 1
  * @synonyms delayfb, dfb
  * @example
@@ -1890,7 +1898,7 @@ export const { delayspeed } = registerControl('delayspeed');
  * Sets the time of the delay effect.
  *
  * @name delayspeed
- * @tags fx
+ * @tags supradough
  * @param {number | Pattern} delayspeed controls the pitch of the delay feedback
  * @synonyms delayt, dt
  * @example
@@ -1903,20 +1911,20 @@ export const { delaytime, delayt, dt } = registerControl('delaytime', 'delayt',
  * Sets the time of the delay effect in cycles.
  *
  * @name delaysync
- * @tags fx, superdough
+ * @tags orbit, superdough
  * @param {number | Pattern} cycles delay length in cycles
- * @synonyms delayt, dt
+ * @synonyms delays, ds
  * @example
  * s("bd bd").delay(.25).delaysync("<1 2 3 5>".div(8))
  *
  */
-export const { delaysync } = registerControl('delaysync');
+export const { delaysync } = registerControl('delaysync', 'delays', 'ds');
 
 /**
  * Specifies whether delaytime is calculated relative to cps.
  *
  * @name lock
- * @tags fx, superdirt
+ * @tags superdirt
  * @param {number | Pattern} enable When set to 1, delaytime is a direct multiple of a cycle.
  * @superdirtOnly
  * @example
@@ -1927,10 +1935,10 @@ export const { delaysync } = registerControl('delaysync');
 
 export const { lock } = registerControl('lock');
 /**
- * Set detune for stacked voices of supported oscillators
+ * Set detune for stacked voices of supported oscillators.
  *
  * @name detune
- * @tags fx
+ * @tags pitch, superdough
  * @param {number | Pattern} amount
  * @synonyms det
  * @example
@@ -1939,10 +1947,10 @@ export const { lock } = registerControl('lock');
  */
 export const { detune, det } = registerControl('detune', 'det');
 /**
- * Set number of stacked voices for supported oscillators
+ * Set number of stacked voices for supported oscillators.
  *
  * @name unison
- * @tags fx
+ * @tags superdough
  * @param {number | Pattern} numvoices
  * @example
  * note("d f a a# a d3").fast(2).s("supersaw").unison("<1 2 7>")
@@ -1954,7 +1962,7 @@ export const { unison } = registerControl('unison');
  * Set the stereo pan spread for supported oscillators
  *
  * @name spread
- * @tags fx
+ * @tags superdough
  * @param {number | Pattern} spread between 0 and 1
  * @example
  * note("d f a a# a d3").fast(2).s("supersaw").spread("<0 .3 1>")
@@ -1965,7 +1973,7 @@ export const { spread } = registerControl('spread');
  * Set dryness of reverb. See `room` and `size` for more information about reverb.
  *
  * @name dry
- * @tags fx, superdough, superdirt
+ * @tags superdirt
  * @param {number | Pattern} dry 0 = wet, 1 = dry
  * @example
  * n("[0,3,7](3,8)").s("superpiano").room(.7).dry("<0 .5 .75 1>").osc()
@@ -1973,11 +1981,11 @@ export const { spread } = registerControl('spread');
  *
  */
 export const { dry } = registerControl('dry');
-// TODO: does not seem to do anything
-/*
+/**
  * Used when using `begin`/`end` or `chop`/`striate` and friends, to change the fade out time of the 'grain' envelope.
  *
  * @name fadeTime
+ * @tags superdirt
  * @synonyms fadeOutTime
  * @param {number | Pattern} time between 0 and 1
  * @example
@@ -1985,13 +1993,12 @@ export const { dry } = registerControl('dry');
  *
  */
 export const { fadeTime, fadeOutTime } = registerControl('fadeTime', 'fadeOutTime');
-// TODO: see above
 export const { fadeInTime } = registerControl('fadeInTime');
 /**
  * Set frequency of sound.
  *
  * @name freq
- * @tags temporal
+ * @tags pitch, superdough
  * @param {number | Pattern} frequency in Hz. the audible range is between 20 and 20000 Hz
  * @example
  * freq("220 110 440 110").s("superzow").osc()
@@ -2005,7 +2012,7 @@ export const { freq } = registerControl('freq');
  * Attack time of pitch envelope.
  *
  * @name pattack
- * @tags fx, superdough, supradough
+ * @tags pitch, envelope, superdough, supradough
  * @synonyms patt
  * @param {number | Pattern} time time in seconds
  * @example
@@ -2017,7 +2024,7 @@ export const { pattack, patt } = registerControl('pattack', 'patt');
  * Decay time of pitch envelope.
  *
  * @name pdecay
- * @tags fx, superdough, supradough
+ * @tags pitch, envelope, superdough, supradough
  * @synonyms pdec
  * @param {number | Pattern} time time in seconds
  * @example
@@ -2031,7 +2038,7 @@ export const { psustain, psus } = registerControl('psustain', 'psus');
  * Release time of pitch envelope
  *
  * @name prelease
- * @tags fx, superdough, supradough
+ * @tags pitch, envelope, superdough, supradough
  * @synonyms prel
  * @param {number | Pattern} time time in seconds
  * @example
@@ -2046,7 +2053,7 @@ export const { prelease, prel } = registerControl('prelease', 'prel');
  * If you don't set other pitch envelope controls, `pattack:.2` will be the default.
  *
  * @name penv
- * @tags fx, superdough, supradough
+ * @tags pitch, envelope, superdough, supradough
  * @param {number | Pattern} semitones change in semitones
  * @example
  * note("c")
@@ -2058,7 +2065,7 @@ export const { penv } = registerControl('penv');
  * Curve of envelope. Defaults to linear. exponential is good for kicks
  *
  * @name pcurve
- * @tags fx
+ * @tags pitch, envelope, superdough
  * @param {number | Pattern} type 0 = linear, 1 = exponential
  * @example
  * note("g1*4")
@@ -2075,7 +2082,7 @@ export const { pcurve } = registerControl('pcurve');
  * If you don't set an anchor, the value will default to the psustain value.
  *
  * @name panchor
- * @tags fx
+ * @tags pitch, envelope, superdough
  * @param {number | Pattern} anchor anchor offset
  * @example
  * note("c c4").penv(12).panchor("<0 .5 1 .5>")
@@ -2097,7 +2104,7 @@ export const { gate, gat } = registerControl('gate', 'gat');
  * Emulation of a Leslie speaker: speakers rotating in a wooden amplified cabinet.
  *
  * @name leslie
- * @tags fx, superdirt
+ * @tags superdirt
  * @param {number | Pattern} wet between 0 and 1
  * @example
  * n("0,4,7").s("supersquare").leslie("<0 .4 .6 1>").osc()
@@ -2109,7 +2116,7 @@ export const { leslie } = registerControl('leslie');
  * Rate of modulation / rotation for leslie effect
  *
  * @name lrate
- * @tags fx, superdirt
+ * @tags superdirt
  * @param {number | Pattern} rate 6.7 for fast, 0.7 for slow
  * @example
  * n("0,4,7").s("supersquare").leslie(1).lrate("<1 2 4 8>").osc()
@@ -2122,7 +2129,7 @@ export const { lrate } = registerControl('lrate');
  * Physical size of the cabinet in meters. Be careful, it might be slightly larger than your computer. Affects the Doppler amount (pitch warble)
  *
  * @name lsize
- * @tags fx, superdirt
+ * @tags superdirt
  * @param {number | Pattern} meters somewhere between 0 and 1
  * @example
  * n("0,4,7").s("supersquare").leslie(1).lrate(2).lsize("<.1 .5 1>").osc()
@@ -2171,7 +2178,7 @@ export const { nudge } = registerControl('nudge');
  * Sets the default octave of a synth.
  *
  * @name octave
- * @tags fx, superdirt
+ * @tags superdirt
  * @synonyms oct
  * @param {number | Pattern} octave octave number
  * @example
@@ -2185,7 +2192,7 @@ export const { octave, oct } = registerControl('octave', 'oct');
  * An `orbit` is a global parameter context for patterns. Patterns with the same orbit will share the same global effects.
  *
  * @name orbit
- * @tags fx, superdough
+ * @tags superdough
  * @synonyms o
  * @param {number | Pattern} number
  * @example
@@ -2204,7 +2211,7 @@ export const { orbit } = registerControl('orbit', 'o');
  *   otherPat.bmod(..) (to modulate another pattern with the bus)
  *
  * @name bus
- * @tags fx, superdough
+ * @tags superdirt
  * @param {number | Pattern} number
  */
 export const { bus } = registerControl('bus');
@@ -2213,7 +2220,7 @@ export const { bus } = registerControl('bus');
  * Postgain multiplier prior to sending the signal to the audio bus.
  *
  * @name busgain
- * @tags fx, superdough
+ * @tags superdirt
  * @synonyms bgain
  * @param {number | Pattern} number
  */
@@ -2227,7 +2234,7 @@ export const { overshape } = registerControl('overshape');
  * Sets position in stereo.
  *
  * @name pan
- * @tags fx, superdough, supradough
+ * @tags superdough, supradough
  * @param {number | Pattern} pan between 0 and 1, from left to right (assuming stereo), once round a circle (assuming multichannel)
  * @example
  * s("[bd hh]*2").pan("<.5 1 .5 0>")
@@ -2236,22 +2243,22 @@ export const { overshape } = registerControl('overshape');
  *
  */
 export const { pan } = registerControl('pan');
-// TODO: this has no effect (see example)
-/*
+/**
  * Controls how much multichannel output is fanned out
  *
  * @name panspan
+ * @tags superdirt
  * @param {number | Pattern} span between -inf and inf, negative is backwards ordering
  * @example
  * s("[bd hh]*2").pan("<.5 1 .5 0>").panspan("<0 .5 1>").osc()
  *
  */
 export const { panspan } = registerControl('panspan');
-// TODO: this has no effect (see example)
-/*
+/**
  * Controls how much multichannel output is spread
  *
  * @name pansplay
+ * @tags superdirt
  * @param {number | Pattern} spread between 0 and 1
  * @example
  * s("[bd hh]*2").pan("<.5 1 .5 0>").pansplay("<0 .5 1>").osc()
@@ -2276,7 +2283,7 @@ export const { voice } = registerControl('voice');
 /**
  * The chord to voice
  * @name chord
- * @tags music_theory
+ * @tags tonal
  * @param {string | Pattern} symbols chord symbols to voice e.g., C, Eb, Fm7, G7. The symbols can be defined via addVoicings
  * @example
  * chord("<Am C D F Am E Am E>").voicing()
@@ -2286,7 +2293,7 @@ export const { chord } = registerControl('chord');
  * Which dictionary to use for the voicings. This falls back to the default dictionary if not provided
  *
  * @name dictionary
- * @tags music_theory
+ * @tags tonal
  * @param {string} dictionaryName which dictionary (having been defined with `addVoicings`) to use
  * @example
  * addVoicings('house', {
@@ -2301,17 +2308,19 @@ export const { dictionary, dict } = registerControl('dictionary', 'dict');
 /** The top note to align the voicing to. Defaults to c5
  *
  * @name anchor
- * @tags music_theory
- * @param {string | Pattern} anchorNote the note to align the voicings to
+ * @tags tonal
+ * @param {string | Pattern} anchorNote the note to align the voicing or scale to
  * @example
  * anchor("<c4 g4 c5 g5>").chord("C").voicing()
+ * @example
+ * n("0 .. 7").anchor("<c4 g4 c5 g5>").scale("<C:major F:minor>")
  **/
 export const { anchor } = registerControl('anchor');
 /**
  * Sets how the voicing is offset from the anchored position
  *
  * @name offset
- * @tags music_theory
+ * @tags tonal
  * @param {number | Pattern} shift the amount to shift the voicing up or down
  * @example
  * chord("<Am C D F Am E Am E>").offset("<0 1 2 3 4 5>") // alter the voicing each time
@@ -2321,7 +2330,7 @@ export const { offset } = registerControl('offset');
  *  How many octaves are voicing steps spread apart, defaults to 1
  *
  *  @name octaves
- *  @tags music_theory
+ *  @tags tonal
  *  @param {number | Pattern} count the number of octaves
  *  @example
  *  chord("<Am C D F Am E Am E>").octaves("<2 4>").voicing()
@@ -2331,7 +2340,7 @@ export const { octaves } = registerControl('octaves');
  * Remove anchor note from the voicing. Useful for melody harmonization
  *
  * @name mode
- * @tags music_theory
+ * @tags tonal
  * @param {string | Pattern} modeName one of {below | above | duck | root}
  * @example
  * mode("<below above duck root>").chord("C").voicing()
@@ -2345,7 +2354,7 @@ export const { mode } = registerControl(['mode', 'anchor']);
  * When using mininotation, you can also optionally add the 'size' parameter, separated by ':'.
  *
  * @name room
- * @tags fx, superdough
+ * @tags orbit, superdough
  * @param {number | Pattern} level between 0 and 1
  * @example
  * s("bd sd [~ bd] sd").room("<0 .2 .4 .6 .8 1>")
@@ -2359,7 +2368,7 @@ export const { room } = registerControl(['room', 'size']);
  * When this property is changed, the reverb will be recaculated, so only change this sparsely..
  *
  * @name roomlp
- * @tags fx, superdough
+ * @tags orbit, superdough
  * @synonyms rlp
  * @param {number} frequency between 0 and 20000hz
  * @example
@@ -2373,7 +2382,7 @@ export const { roomlp, rlp } = registerControl('roomlp', 'rlp');
  * When this property is changed, the reverb will be recaculated, so only change this sparsely..
  *
  * @name roomdim
- * @tags fx, superdough
+ * @tags orbit, superdough
  * @synonyms rdim
  * @param {number} frequency between 0 and 20000hz
  * @example
@@ -2388,7 +2397,7 @@ export const { roomdim, rdim } = registerControl('roomdim', 'rdim');
  * When this property is changed, the reverb will be recaculated, so only change this sparsely..
  *
  * @name roomfade
- * @tags fx, superdough
+ * @tags orbit, superdough
  * @synonyms rfade
  * @param {number} seconds for the reverb to fade
  * @example
@@ -2401,7 +2410,7 @@ export const { roomfade, rfade } = registerControl('roomfade', 'rfade');
 /**
  * Sets the sample to use as an impulse response for the reverb.
  * @name iresponse
- * @tags fx, superdough
+ * @tags orbit, superdough
  * @param {string | Pattern} sample to use as an impulse response
  * @synonyms ir
  * @example
@@ -2413,7 +2422,7 @@ export const { ir, iresponse } = registerControl(['ir', 'i'], 'iresponse');
 /**
  * Sets speed of the sample for the impulse response.
  * @name irspeed
- * @tags fx, superdough
+ * @tags orbit, superdough
  * @param {string | Pattern} speed
  * @example
  * samples('github:switchangel/pad')
@@ -2425,7 +2434,7 @@ export const { irspeed } = registerControl('irspeed');
 /**
  * Sets the beginning of the IR response sample
  * @name irbegin
- * @tags fx, superdough
+ * @tags orbit, superdough
  * @param {string | Pattern} begin between 0 and 1
  * @synonyms ir
  * @example
@@ -2439,7 +2448,7 @@ export const { irbegin } = registerControl('irbegin');
  * When this property is changed, the reverb will be recaculated, so only change this sparsely..
  *
  * @name roomsize
- * @tags fx, superdough
+ * @tags orbit, superdough
  * @param {number | Pattern} size between 0 and 10
  * @synonyms rsize, sz, size
  * @example
@@ -2463,7 +2472,7 @@ export const { roomsize, size, sz, rsize } = registerControl('roomsize', 'size',
  *
  *
  * @name shape
- * @tags fx, superdough
+ * @tags distortion, superdough
  * @param {number | Pattern} distortion between 0 and 1
  * @example
  * s("bd sd [~ bd] sd,hh*8").shape("<0 .2 .4 .6 .8>")
@@ -2476,7 +2485,7 @@ export const { shape } = registerControl(['shape', 'shapevol']);
  * Most useful values are usually between 0 and 10 (depending on source gain). If you are feeling adventurous, you can turn it up to 11 and beyond ;)
  *
  * @name distort
- * @tags fx, superdough, supradough
+ * @tags distortion, superdough, supradough
  * @synonyms dist
  * @param {number | Pattern} distortion amount of distortion to apply
  * @param {number | Pattern} volume linear postgain of the distortion
@@ -2495,8 +2504,8 @@ export const { distort, dist } = registerControl(['distort', 'distortvol', 'dist
  * Postgain for waveshaping distortion.
  *
  * @name distortvol
- * @synonyms distvol
- * @tags fx, superdough, supradough
+ * @synonyms distortion, distvol
+ * @tags superdough, supradough
  * @param {number | Pattern} volume linear postgain of the distortion
  * @example
  * s("bd*4").bank("tr909").distort(2).distortvol(0.8)
@@ -2507,7 +2516,7 @@ export const { distortvol } = registerControl('distortvol', 'distvol');
  * Type of waveshaping distortion to apply.
  *
  * @name distorttype
- * @tags fx, superdough, supradough
+ * @tags distortion, superdough, supradough
  * @synonyms disttype
  * @param {number | string | Pattern} type type of distortion to apply
  * @example
@@ -2526,7 +2535,7 @@ export const { distorttype } = registerControl('distorttype', 'disttype');
  * More info [here](https://developer.mozilla.org/en-US/docs/Web/API/DynamicsCompressorNode?retiredLocale=de#instance_properties)
  *
  * @name compressor
- * @tags fx, superdough
+ * @tags superdough
  * @example
  * s("bd sd [~ bd] sd,hh*8")
  * .compressor("-20:20:10:.002:.02")
@@ -2547,7 +2556,7 @@ export const { compressorRelease } = registerControl('compressorRelease');
  * Changes the speed of sample playback, i.e. a cheap way of changing pitch.
  *
  * @name speed
- * @tags fx
+ * @tags pitch, samples
  * @param {number | Pattern} speed -inf to inf, negative numbers play the sample backwards.
  * @example
  * s("bd*6").speed("1 2 4 1 -2 -4")
@@ -2561,7 +2570,7 @@ export const { speed } = registerControl('speed');
  * Changes the speed of sample playback, i.e. a cheap way of changing pitch.
  *
  * @name stretch
- * @tags fx
+ * @tags pitch, samples
  * @param {number | Pattern} factor -inf to inf, negative numbers play the sample backwards.
  * @example
  * s("gm_flute").stretch("1 2 .5")
@@ -2572,7 +2581,7 @@ export const { stretch } = registerControl('stretch');
  * Used in conjunction with `speed`, accepts values of "r" (rate, default behavior), "c" (cycles), or "s" (seconds). Using `unit "c"` means `speed` will be interpreted in units of cycles, e.g. `speed "1"` means samples will be stretched to fill a cycle. Using `unit "s"` means the playback speed will be adjusted so that the duration is the number of seconds specified by `speed`.
  *
  * @name unit
- * @tags fx, superdirt
+ * @tags superdirt
  * @param {number | string | Pattern} unit see description above
  * @example
  * speed("1 2 .5 3").s("bd").unit("c").osc()
@@ -2587,7 +2596,7 @@ export const { unit } = registerControl('unit');
  * "A simplistic pitch-raising algorithm. It's not meant to sound natural; its sound is reminiscent of some weird mixture of filter, ring-modulator and pitch-shifter, depending on the input. The algorithm works by cutting the signal into fragments (delimited by upwards-going zero-crossings) and squeezing those fragments in the time domain (i.e. simply playing them back faster than they came in), leaving silences inbetween. All the parameters apart from memlen can be modulated."
  *
  * @name squiz
- * @tags fx, superdirt
+ * @tags superdirt
  * @param {number | Pattern} squiz Try passing multiples of 2 to it - 2, 4, 8 etc.
  * @example
  * squiz("2 4/2 6 [8 16]").s("bd").osc()
@@ -2612,7 +2621,7 @@ export const { squiz } = registerControl('squiz');
  * Formant filter to make things sound like vowels.
  *
  * @name vowel
- * @tags fx, superdough
+ * @tags superdough
  * @param {string | Pattern} vowel You can use a e i o u ae aa oe ue y uh un en an on, corresponding to [a] [e] [i] [o] [u] [æ] [ɑ] [ø] [y] [ɯ] [ʌ] [œ̃] [ɛ̃] [ɑ̃] [ɔ̃]. Aliases: aa = å = ɑ, oe = ø = ö, y = ı, ae = æ.
  * @example
  * note("[c2 <eb2 <g2 g1>>]*2").s('sawtooth')
@@ -2634,10 +2643,10 @@ export const { vowel } = registerControl('vowel');
  */
 export const { waveloss } = registerControl('waveloss');
 /**
- * Noise crackle density
+ * crackle noise density
  *
  * @name density
- * @tags fx, superdough
+ * @tags superdough
  * @param {number | Pattern} density between 0 and x
  * @example
  * s("crackle*4").density("<0.01 0.04 0.2 0.5>".slow(4))
@@ -2687,7 +2696,7 @@ export const { cps } = registerControl('cps');
  * Multiplies the duration with the given number. Also cuts samples off at the end if they exceed the duration.
  *
  * @name clip
- * @tags temporal
+ * @tags superdough
  * @synonyms legato
  * @param {number | Pattern} factor >= 0
  * @example
@@ -2700,7 +2709,7 @@ export const { clip, legato } = registerControl('clip', 'legato');
  * Sets the duration of the event in cycles. Similar to clip / legato, it also cuts samples off at the end if they exceed the duration.
  *
  * @name duration
- * @tags temporal
+ * @tags superdough
  * @synonyms dur
  * @param {number | Pattern} seconds >= 0
  * @example
@@ -2743,7 +2752,7 @@ export let createParams = (...names) =>
  * ADSR envelope: Combination of Attack, Decay, Sustain, and Release.
  *
  * @name adsr
- * @tags fx
+ * @tags envelope, amplitude
  * @param {number | Pattern} time attack time in seconds
  * @param {number | Pattern} time decay time in seconds
  * @param {number | Pattern} gain sustain level (0 to 1)
@@ -2778,7 +2787,7 @@ export const ar = register('ar', (t, pat) => {
  * MIDI channel: Sets the MIDI channel for the event.
  *
  * @name midichan
- * @tags external_io
+ * @tags external_io, midi
  * @param {number | Pattern} channel MIDI channel number (0-15)
  * @example
  * note("c4").midichan(1).midi()
@@ -2791,7 +2800,7 @@ export const { midimap } = registerControl('midimap');
  * MIDI port: Sets the MIDI port for the event.
  *
  * @name midiport
- * @tags external_io
+ * @tags external_io, midi
  * @param {number | Pattern} port MIDI port
  * @example
  * note("c a f e").midiport("<0 1 2 3>").midi()
@@ -2802,7 +2811,7 @@ export const { midiport } = registerControl('midiport');
  * MIDI command: Sends a MIDI command message.
  *
  * @name midicmd
- * @tags external_io
+ * @tags external_io, midi
  * @param {number | Pattern} command MIDI command
  * @example
  * midicmd("clock*48,<start stop>/2").midi()
@@ -2813,7 +2822,7 @@ export const { midicmd } = registerControl('midicmd');
  * MIDI control: Sends a MIDI control change message.
  *
  * @name control
- * @tags external_io
+ * @tags external_io, midi
  * @param {number | Pattern}  MIDI control number (0-127)
  * @param {number | Pattern}  MIDI controller value (0-127)
  */
@@ -2829,7 +2838,7 @@ export const control = register('control', (args, pat) => {
  * MIDI control number: Sends a MIDI control change message.
  *
  * @name ccn
- * @tags external_io
+ * @tags external_io, midi
  * @param {number | Pattern}  MIDI control number (0-127)
  */
 export const { ccn } = registerControl('ccn');
@@ -2837,7 +2846,7 @@ export const { ccn } = registerControl('ccn');
  * MIDI control value: Sends a MIDI control change message.
  *
  * @name ccv
- * @tags external_io
+ * @tags external_io, midi
  * @param {number | Pattern}  MIDI control value (0-127)
  */
 export const { ccv } = registerControl('ccv');
@@ -2847,7 +2856,7 @@ export const { ctlNum } = registerControl('ctlNum');
 /**
  * MIDI NRPN non-registered parameter number: Sends a MIDI NRPN non-registered parameter number message.
  * @name nrpnn
- * @tags external_io
+ * @tags external_io, midi
  * @param {number | Pattern} nrpnn MIDI NRPN non-registered parameter number (0-127)
  * @example
  * note("c4").nrpnn("1:8").nrpv("123").midichan(1).midi()
@@ -2856,7 +2865,7 @@ export const { nrpnn } = registerControl('nrpnn');
 /**
  * MIDI NRPN non-registered parameter value: Sends a MIDI NRPN non-registered parameter value message.
  * @name nrpv
- * @tags external_io
+ * @tags external_io, midi
  * @param {number | Pattern} nrpv MIDI NRPN non-registered parameter value (0-127)
  * @example
  * note("c4").nrpnn("1:8").nrpv("123").midichan(1).midi()
@@ -2877,7 +2886,7 @@ export const { progNum } = registerControl('progNum');
 /**
  * MIDI sysex: Sends a MIDI sysex message.
  * @name sysex
- * @tags external_io
+ * @tags external_io, midi
  * @param {number | Pattern} id Sysex ID
  * @param {number | Pattern} data Sysex data
  * @example
@@ -2893,7 +2902,7 @@ export const sysex = register('sysex', (args, pat) => {
 /**
  * MIDI sysex ID: Sends a MIDI sysex identifier message.
  * @name sysexid
- * @tags external_io
+ * @tags external_io, midi
  * @param {number | Pattern} id Sysex ID
  * @example
  * note("c4").sysexid("0x77").sysexdata("0x01:0x02:0x03:0x04").midichan(1).midi()
@@ -2902,7 +2911,7 @@ export const { sysexid } = registerControl('sysexid');
 /**
  * MIDI sysex data: Sends a MIDI sysex message.
  * @name sysexdata
- * @tags external_io
+ * @tags external_io, midi
  * @param {number | Pattern} data Sysex data
  * @example
  * note("c4").sysexid("0x77").sysexdata("0x01:0x02:0x03:0x04").midichan(1).midi()
@@ -2912,7 +2921,7 @@ export const { sysexdata } = registerControl('sysexdata');
 /**
  * MIDI pitch bend: Sends a MIDI pitch bend message.
  * @name midibend
- * @tags external_io
+ * @tags external_io, midi
  * @param {number | Pattern} midibend MIDI pitch bend (-1 - 1)
  * @example
  * note("c4").midibend(sine.slow(4).range(-0.4,0.4)).midi()
@@ -2921,7 +2930,7 @@ export const { midibend } = registerControl('midibend');
 /**
  * MIDI key after touch: Sends a MIDI key after touch message.
  * @name miditouch
- * @tags external_io
+ * @tags external_io, midi
  * @param {number | Pattern} miditouch MIDI key after touch (0-1)
  * @example
  * note("c4").miditouch(sine.slow(4).range(0,1)).midi()
@@ -2962,7 +2971,7 @@ export const getControlName = (alias) => {
  * Sets properties in a batch.
  *
  * @name as
- * @tags temporal
+ * @tags combiners
  * @param {String | Array} mapping the control names that are set
  * @example
  * "c:.5 a:1 f:.25 e:.8".as("note:clip")
@@ -3046,6 +3055,7 @@ registerSubControls('lfo', [
   ['skew', 'sk'],
   ['curve', 'cu'],
   ['sync', 's'],
+  ['retrig', 'rt'],
   ['fxi'],
 ]);
 registerSubControls('env', [
@@ -3127,18 +3137,19 @@ Pattern.prototype.modulate = function (type, config, idPat) {
  * a `sometimes`. See example below.
  *
  * @name lfo
- * @tags fx, superdough
+ * @tags lfo, superdough
  * @param {Object} config LFO configuration.
  * @param {string | Pattern} [config.control] Node to modulate. Aliases: c
  * @param {string | Pattern} [config.subControl] Sub-control name to append to the control key. Aliases: sc
  * @param {number | Pattern} [config.rate] Modulation rate. Aliases: r
+ * @param {number | Pattern} [config.sync] Tempo-synced modulation rate. Aliases: s
  * @param {number | Pattern} [config.depth] Relative modulation depth. Aliases: dep, dr
  * @param {number | Pattern} [config.depthabs] Absolute modulation depth. Aliases: da
  * @param {number | Pattern} [config.dcoffset] DC offset / bias for the waveform. Aliases: dc
  * @param {number | Pattern} [config.shape] Shape index. Aliases: sh
  * @param {number | Pattern} [config.skew] Skew amount. Aliases: sk
  * @param {number | Pattern} [config.curve] Exponential curve amount. Aliases: cu
- * @param {number | Pattern} [config.sync] Tempo-synced modulation rate. Aliases: s
+ * @param {number | Pattern} [config.retrig] If > 0.5, the LFO will retrigger on each event. Aliases: rt
  * @param {number | Pattern} [config.fxi] FX index to target
  * @param {string | Pattern} id ID to use for this modulator
  * @returns Pattern
@@ -3181,7 +3192,7 @@ export const lfo = (config) => pure({}).lfo(config);
  * a `sometimes`. See example below.
  *
  * @name env
- * @tags fx, superdough
+ * @tags envelope, superdough
  * @param {Object} config Envelope configuration.
  * @param {string | Pattern} [config.control] Node to modulate. Aliases: c
  * @param {string | Pattern} [config.subControl] Sub-control name to append to the control key. Aliases: sc
@@ -3242,7 +3253,7 @@ export const env = (config) => pure({}).env(config);
  * a `sometimes`. See example below.
  *
  * @name bmod
- * @tags fx, superdough
+ * @tags superdough
  * @param {Object} config Bus modulation configuration.
  * @param {string | Pattern} [config.bus] Bus to get modulation signal from
  * @param {string | Pattern} [config.control] Node to modulate. Aliases: c
@@ -3269,7 +3280,7 @@ export const bmod = (config) => pure({}).bmod(config);
  * and sustains
  *
  * @name transient
- * @tags fx, superdough
+ * @tags superdough
  * @param {number | Pattern} attack Emphasis on transients; between -1 (deaccentuate) and 1 (accentuate)
  * @param {number | Pattern} sustain Emphasis on the sustains; between -1 (deaccentuate) and 1 (accentuate)
  * @example
diff --git a/packages/core/package.json b/packages/core/package.json
index e558c574c..9316ec496 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -31,7 +31,6 @@
   },
   "homepage": "https://strudel.cc",
   "dependencies": {
-    "@kabelsalat/web": "^0.4.1",
     "fraction.js": "^5.2.1"
   },
   "gitHead": "0e26d4e741500f5bae35b023608f062a794905c2",
diff --git a/packages/core/pattern.mjs b/packages/core/pattern.mjs
index b7a047bfc..b63a702f8 100644
--- a/packages/core/pattern.mjs
+++ b/packages/core/pattern.mjs
@@ -818,7 +818,6 @@ export class Pattern {
    * @name layer
    * @tags combiners
    * @memberof Pattern
-   * @synonyms apply
    * @returns Pattern
    * @example
    * "<0 2 4 6 ~ 4 ~ 2 0!3 ~!5>*8"
@@ -1055,91 +1054,88 @@ function _composeOp(a, b, func) {
   return func(a, b);
 }
 
-// Make composers
-(function () {
-  // pattern composers
-  const composers = {
-    set: [(a, b) => b],
-    keep: [(a) => a],
-    keepif: [(a, b) => (b ? a : undefined)],
+// pattern composers
+const COMPOSERS = {
+  set: [(a, b) => b],
+  keep: [(a) => a],
+  keepif: [(a, b) => (b ? a : undefined)],
 
-    // numerical functions
-    /**
-     *
-     * Assumes a pattern of numbers. Adds the given number to each item in the pattern.
-     * @name add
-     * @memberof Pattern
-     * @tags math
-     * @example
-     * // Here, the triad 0, 2, 4 is shifted by different amounts
-     * n("0 2 4".add("<0 3 4 0>")).scale("C:major")
-     * // Without add, the equivalent would be:
-     * // n("<[0 2 4] [3 5 7] [4 6 8] [0 2 4]>").scale("C:major")
-     * @example
-     * // You can also use add with notes:
-     * note("c3 e3 g3".add("<0 5 7 0>"))
-     * // Behind the scenes, the notes are converted to midi numbers:
-     * // note("48 52 55".add("<0 5 7 0>"))
-     */
-    add: [numeralArgs((a, b) => a + b)], // support string concatenation
-    /**
-     *
-     * Like add, but the given numbers are subtracted.
-     * @name sub
-     * @memberof Pattern
-     * @tags math
-     * @example
-     * n("0 2 4".sub("<0 1 2 3>")).scale("C4:minor")
-     * // See add for more information.
-     */
-    sub: [numeralArgs((a, b) => a - b)],
-    /**
-     *
-     * Multiplies each number by the given factor.
-     * @name mul
-     * @memberof Pattern
-     * @tags math
-     * @example
-     * "<1 1.5 [1.66, <2 2.33>]>*4".mul(150).freq()
-     */
-    mul: [numeralArgs((a, b) => a * b)],
-    /**
-     *
-     * Divides each number by the given factor.
-     * @name div
-     * @memberof Pattern
-     * @tags math
-     */
-    div: [numeralArgs((a, b) => a / b)],
-    mod: [numeralArgs(_mod)],
-    pow: [numeralArgs(Math.pow)],
-    log2: [numeralArgs(Math.log2)],
-    band: [numeralArgs((a, b) => a & b)],
-    bor: [numeralArgs((a, b) => a | b)],
-    bxor: [numeralArgs((a, b) => a ^ b)],
-    blshift: [numeralArgs((a, b) => a << b)],
-    brshift: [numeralArgs((a, b) => a >> b)],
+  // numerical functions
+  /**
+   *
+   * Assumes a pattern of numbers. Adds the given number to each item in the pattern.
+   * @name add
+   * @memberof Pattern
+   * @tags math
+   * @example
+   * // Here, the triad 0, 2, 4 is shifted by different amounts
+   * n("0 2 4".add("<0 3 4 0>")).scale("C:major")
+   * // Without add, the equivalent would be:
+   * // n("<[0 2 4] [3 5 7] [4 6 8] [0 2 4]>").scale("C:major")
+   * @example
+   * // You can also use add with notes:
+   * note("c3 e3 g3".add("<0 5 7 0>"))
+   * // Behind the scenes, the notes are converted to midi numbers:
+   * // note("48 52 55".add("<0 5 7 0>"))
+   */
+  add: [numeralArgs((a, b) => a + b)], // support string concatenation
+  /**
+   *
+   * Like add, but the given numbers are subtracted.
+   * @name sub
+   * @memberof Pattern
+   * @tags math
+   * @example
+   * n("0 2 4".sub("<0 1 2 3>")).scale("C4:minor")
+   * // See add for more information.
+   */
+  sub: [numeralArgs((a, b) => a - b)],
+  /**
+   *
+   * Multiplies each number by the given factor.
+   * @name mul
+   * @memberof Pattern
+   * @tags math
+   * @example
+   * "<1 1.5 [1.66, <2 2.33>]>*4".mul(150).freq()
+   */
+  mul: [numeralArgs((a, b) => a * b)],
+  /**
+   *
+   * Divides each number by the given factor.
+   * @name div
+   * @memberof Pattern
+   * @tags math
+   */
+  div: [numeralArgs((a, b) => a / b)],
+  mod: [numeralArgs(_mod)],
+  pow: [numeralArgs(Math.pow)],
+  log2: [numeralArgs(Math.log2)],
+  band: [numeralArgs((a, b) => a & b)],
+  bor: [numeralArgs((a, b) => a | b)],
+  bxor: [numeralArgs((a, b) => a ^ b)],
+  blshift: [numeralArgs((a, b) => a << b)],
+  brshift: [numeralArgs((a, b) => a >> b)],
 
-    // TODO - force numerical comparison if both look like numbers?
-    lt: [(a, b) => a < b],
-    gt: [(a, b) => a > b],
-    lte: [(a, b) => a <= b],
-    gte: [(a, b) => a >= b],
-    eq: [(a, b) => a == b],
-    eqt: [(a, b) => a === b],
-    ne: [(a, b) => a != b],
-    net: [(a, b) => a !== b],
-    and: [(a, b) => a && b],
-    or: [(a, b) => a || b],
+  // TODO - force numerical comparison if both look like numbers?
+  lt: [(a, b) => a < b],
+  gt: [(a, b) => a > b],
+  lte: [(a, b) => a <= b],
+  gte: [(a, b) => a >= b],
+  eq: [(a, b) => a == b],
+  eqt: [(a, b) => a === b],
+  ne: [(a, b) => a != b],
+  net: [(a, b) => a !== b],
+  and: [(a, b) => a && b],
+  or: [(a, b) => a || b],
 
-    //  bitwise ops
-    func: [(a, b) => b(a)],
-  };
-
-  const hows = ['In', 'Out', 'Mix', 'Squeeze', 'SqueezeOut', 'Reset', 'Restart', 'Poly'];
+  //  bitwise ops
+  func: [(a, b) => b(a)],
+};
 
+const _setupAlignments = () => {
   // generate methods to do what and how
-  for (const [what, [op, preprocess]] of Object.entries(composers)) {
+  for (const [what, [op, preprocess]] of Object.entries(COMPOSERS)) {
     // make plain version, e.g. pat._add(value) adds that plain value
     // to all the values in pat
     Pattern.prototype['_' + what] = function (value) {
@@ -1148,16 +1144,18 @@ function _composeOp(a, b, func) {
 
     // make patternified monster version
     Object.defineProperty(Pattern.prototype, what, {
+      // Set to configurable so we can update if the default alignment changes
+      configurable: true,
       // a getter that returns a function, so 'pat' can be
       // accessed by closures that are methods of that function..
       get: function () {
         const pat = this;
 
         // wrap the 'in' function as default behaviour
-        const wrapper = (...other) => pat[what]['in'](...other);
+        const wrapper = (...other) => pat[what][DEFAULT_ALIGNMENT](...other);
 
         // add methods to that function for each behaviour
-        for (const how of hows) {
+        for (const how of ALIGNMENTS) {
           wrapper[how.toLowerCase()] = function (...other) {
             var howpat = pat;
             other = sequence(other);
@@ -1182,15 +1180,23 @@ function _composeOp(a, b, func) {
         return wrapper;
       },
     });
-
-    // Default op to 'set', e.g. pat.squeeze(pat2) = pat.set.squeeze(pat2)
-    for (const how of hows) {
-      Pattern.prototype[how.toLowerCase()] = function (...args) {
-        return this.set[how.toLowerCase()](args);
-      };
-    }
   }
+};
 
+let DEFAULT_ALIGNMENT = 'in';
+const ALIGNMENTS = ['In', 'Out', 'Mix', 'Squeeze', 'SqueezeOut', 'Reset', 'Restart', 'Poly'];
+const ALIGNMENT_KEYS = ALIGNMENTS.map((how) => how.toLowerCase());
+
+// Make composers
+(function () {
+  _setupAlignments();
+
+  // Default op to 'set', e.g. pat.squeeze(pat2) = pat.set.squeeze(pat2)
+  for (const how of ALIGNMENTS) {
+    Pattern.prototype[how.toLowerCase()] = function (...args) {
+      return this.set[how.toLowerCase()](args);
+    };
+  }
   // binary composers
   /**
    * Applies the given structure to the pattern:
@@ -1249,6 +1255,28 @@ function _composeOp(a, b, func) {
   };
 })();
 
+/**
+ * Sets the default method of combining events from two patterns (aka [alignment](https://strudel.cc/technical-manual/alignment/)) in Strudel.
+ * The default method is 'in', meaning that patterns to the left will (typically) dictate the event timings when combined with patterns to the right.
+ * By changing alignment to 'out', the opposite will happen. With 'mix', they will combine their event timings.
+ *
+ * Note that we say the _default_ method, because alignments can also be set explicitly with calls like
+ * 'add.mix', 'set.squeeze', etc.
+ *
+ * @param {string} method Default join method to use. Options: 'in', 'out', 'mix', 'squeeze', 'squeezeout', 'reset', 'restart', 'poly'
+ * @tags combiners
+ * @example
+ * setDefaultJoin('mix') // also try 'in', 'out', 'squeeze', etc.
+ * s("saw").vel("1 0.5").note("F A C E").delay("0 0.2 0.3")
+ */
+export const setDefaultJoin = (alignment) => {
+  alignment = alignment?.toLowerCase();
+  if (DEFAULT_ALIGNMENT !== alignment && ALIGNMENT_KEYS.includes(alignment)) {
+    DEFAULT_ALIGNMENT = alignment;
+    _setupAlignments();
+  }
+};
+
 // aliases
 export const polyrhythm = stack;
 export const pr = stack;
@@ -1536,10 +1564,10 @@ export function arrange(...sections) {
  * @tags combiners
  * @return {Pattern}
  * @example
-seqPLoop([0, 2, "bd(3,8)"],
-         [1, 3, "cp(3,8)"]
-        )
-  .sound()
+seqPLoop(
+  [0, 2, "bd(3,8)"],
+  [1, 3, "cp(3,8)"]
+).sound()
  */
 export function seqPLoop(...parts) {
   let total = Fraction(0);
@@ -1582,7 +1610,7 @@ export function sequence(...pats) {
 
 /** Like **cat**, but the items are crammed into one cycle.
  * @tags combiners
- * @synonyms seq, fastcat
+ * @synonyms fastcat
  * @example
  * seq("e5", "b4", ["d5", "c5"]).note()
  * // "e5 b4 [d5 c5]".note()
@@ -2109,13 +2137,12 @@ export const { firstOf, every } = register(['firstOf', 'every'], function (n, fu
 });
 
 /**
- * Like layer, but with a single function:
- * @tags temporal
+ * Applies the given function to the pattern. Like layer, but with a single function:
+ * @tags combiners
  * @name apply
  * @example
  * "<c3 eb3 g3>".scale('C minor').apply(scaleTranspose("0,2,4")).note()
  */
-// TODO: remove or dedupe with layer?
 export const apply = register('apply', function (func, pat) {
   return func(pat);
 });
@@ -2472,7 +2499,7 @@ export const { juxBy, juxby } = register(['juxBy', 'juxby'], function (by, func,
 
 /**
  * The jux function creates strange stereo effects, by applying a function to a pattern, but only in the right-hand channel.
- * @tags temporal
+ * @tags temporal, superdough
  * @example
  * s("bd lt [~ ht] mt cp ~ bd hh").jux(rev)
  * @example
@@ -2486,7 +2513,7 @@ export const jux = register('jux', function (func, pat) {
 
 /**
  * Superimpose and offset multiple times, applying the given function each time.
- * @tags temporal
+ * @tags temporal, functional
  * @name echoWith
  * @synonyms echowith, stutWith, stutwith
  * @param {number} times how many times to repeat
@@ -2660,7 +2687,7 @@ export const { repeatCycles } = register(
 
 /**
  * Divides a pattern into a given number of parts, then cycles through those parts in turn, applying the given function to each part in turn (one part per cycle).
- * @tags temporal
+ * @tags temporal, functional
  * @name chunk
  * @synonyms slowChunk, slowchunk
  * @memberof Pattern
@@ -2824,7 +2851,7 @@ Pattern.prototype.tag = function (tag) {
 /**
  * Filters haps using the given function
  * @name filter
- * @tags temporal
+ * @tags temporal, functional
  * @param {Function} test function to test Hap
  * @example
  * s("hh!7 oh").filter(hap => hap.value.s === 'hh')
@@ -2834,7 +2861,7 @@ export const filter = register('filter', (test, pat) => pat.withHaps((haps) => h
 /**
  * Filters haps by their begin time
  * @name filterWhen
- * @tags temporal
+ * @tags temporal, functional
  * @param {Function} test function to test Hap.whole.begin
  * @example
  * oneCycle: s("bd*4").filterWhen((t) => t < 1)
@@ -2844,7 +2871,7 @@ export const filterWhen = register('filterWhen', (test, pat) => pat.filter((h) =
 /**
  * Use within to apply a function to only a part of a pattern.
  * @name within
- * @tags temporal
+ * @tags temporal, functional
  * @param {number} start start within cycle (0 - 1)
  * @param {number} end end within cycle (0 - 1). Must be > start
  * @param {Function} func function to be applied to the sub-pattern
@@ -2919,7 +2946,7 @@ export function _match(span, hap_p) {
  * *Experimental*
  *
  * Speeds a pattern up or down, to fit to the given number of steps per cycle.
- * @tags temporal
+ * @tags stepwise
  * @example
  * sound("bd sd cp").pace(4)
  * // The same as sound("{bd sd cp}%4") or sound("<bd sd cp>*4")
@@ -2961,7 +2988,7 @@ export function _polymeterListSteps(steps, ...args) {
  * *Experimental*
  *
  * Aligns the steps of the patterns, creating polymeters. The patterns are repeated until they all fit the cycle. For example, in the below the first pattern is repeated twice, and the second is repeated three times, to fit the lowest common multiple of six steps.
- * @tags temporal
+ * @tags stepwise
  * @synonyms pm
  * @example
  * // The same as note("{c eb g, c2 g2}%6")
@@ -2994,7 +3021,7 @@ export function polymeter(...args) {
  * The steps can either be inferred from the pattern, or provided as a [length, pattern] pair.
  * Has the alias `timecat`.
  * @name stepcat
- * @tags combiners
+ * @tags stepwise
  * @synonyms timeCat, timecat
  * @return {Pattern}
  * @example
@@ -3052,7 +3079,7 @@ export function stepcat(...timepats) {
  * Concatenates patterns stepwise, according to an inferred 'steps per cycle'.
  * Similar to `stepcat`, but if an argument is a list, the whole pattern will alternate between the elements in the list.
  *
- * @tags combiners
+ * @tags stepwise
  * @return {Pattern}
  * @example
  * stepalt(["bd cp", "mt"], "bd").sound()
@@ -3079,7 +3106,7 @@ export function stepalt(...groups) {
  *
  * Takes the given number of steps from a pattern (dropping the rest).
  * A positive number will take steps from the start of a pattern, and a negative number from the end.
- * @tags temporal
+ * @tags stepwise
  * @return {Pattern}
  * @example
  * "bd cp ht mt".take("2").sound()
@@ -3124,7 +3151,7 @@ export const take = stepRegister('take', function (i, pat) {
  *
  * Drops the given number of steps from a pattern.
  * A positive number will drop steps from the start of a pattern, and a negative number from the end.
- * @tags temporal
+ * @tags stepwise
  * @return {Pattern}
  * @example
  * "tha dhi thom nam".drop("1").sound().bank("mridangam")
@@ -3153,7 +3180,7 @@ export const drop = stepRegister('drop', function (i, pat) {
  * `extend` is similar to `fast` in that it increases its density, but it also increases the step count
  * accordingly. So `stepcat("a b".extend(2), "c d")` would be the same as `"a b a b c d"`, whereas
  * `stepcat("a b".fast(2), "c d")` would be the same as `"[a b] [a b] c d"`.
- * @tags temporal
+ * @tags stepwise
  * @example
  * stepcat(
  *   sound("bd bd - cp").extend(2),
@@ -3172,7 +3199,7 @@ export const extend = stepRegister('extend', function (factor, pat) {
  * `stepcat("a b".fast(2), "c d")` would be the same as `"[a b] [a b] c d"`.
  *
  * TODO: find out how this function differs from extend
- * @tags temporal
+ * @tags stepwise
  * @example
  * stepcat(
  *   sound("bd bd - cp").replicate(2),
@@ -3187,7 +3214,7 @@ export const replicate = stepRegister('replicate', function (factor, pat) {
  * *Experimental*
  *
  * Expands the step size of the pattern by the given factor.
- * @tags temporal
+ * @tags stepwise
  * @example
  * sound("tha dhi thom nam").bank("mridangam").expand("3 2 1 1 2 3").pace(8)
  */
@@ -3199,7 +3226,7 @@ export const expand = stepRegister('expand', function (factor, pat) {
  * *Experimental*
  *
  * Contracts the step size of the pattern by the given factor. See also `expand`.
- * @tags temporal
+ * @tags stepwise
  * @example
  * sound("tha dhi thom nam").bank("mridangam").contract("3 2 1 1 2 3").pace(8)
  */
@@ -3254,7 +3281,7 @@ export const shrinklist = (amount, pat) => pat.shrinklist(amount);
  * Progressively shrinks the pattern by 'n' steps until there's nothing left, or if a second value is given (using mininotation list syntax with `:`),
  * that number of times.
  * A positive number will progressively drop steps from the start of a pattern, and a negative number from the end.
- * @tags temporal
+ * @tags stepwise
  * @return {Pattern}
  * @example
  * "tha dhi thom nam".shrink("1").sound()
@@ -3294,7 +3321,7 @@ export const shrink = register(
  * Progressively grows the pattern by 'n' steps until the full pattern is played, or if a second value is given (using mininotation list syntax with `:`),
  * that number of times.
  * A positive number will progressively grow steps from the start of a pattern, and a negative number from the end.
- * @tags temporal
+ * @tags stepwise
  * @return {Pattern}
  * @example
  * "tha dhi thom nam".grow("1").sound()
@@ -3335,7 +3362,7 @@ export const grow = register(
  * on successive repetitions. The patterns are added together stepwise, with all repetitions taking place over a single cycle. Using `pace` to set the 
  * number of steps per cycle is therefore usually recommended.
  *
- * @tags combiners
+ * @tags stepwise
  * @return {Pattern}
  * @example
  * "[c g]".tour("e f", "e f g", "g f e c").note()
@@ -3362,7 +3389,7 @@ Pattern.prototype.tour = function (...many) {
  * 'zips' together the steps of the provided patterns. This can create a long repetition, taking place over a single, dense cycle. 
  * Using `pace` to set the number of steps per cycle is therefore usually recommended.
  * 
- * @tags combiners
+ * @tags stepwise
  * @returns {Pattern}
  * @example
  * zip("e f", "e f g", "g [f e] a f4 c").note()
@@ -3414,7 +3441,7 @@ Pattern.prototype.steps = Pattern.prototype.pace;
  * Cuts each sample into the given number of parts, allowing you to explore a technique known as 'granular synthesis'.
  * It turns a pattern of samples into a pattern of parts of samples.
  * @name chop
- * @tags temporal
+ * @tags samples
  * @memberof Pattern
  * @returns Pattern
  * @example
@@ -3445,7 +3472,7 @@ export const chop = register('chop', function (n, pat) {
 /**
  * Cuts each sample into the given number of parts, triggering progressive portions of each sample at each loop.
  * @name striate
- * @tags temporal
+ * @tags samples
  * @memberof Pattern
  * @returns Pattern
  * @example
@@ -3464,14 +3491,13 @@ export const striate = register('striate', function (n, pat) {
 /**
  * Makes the sample fit the given number of cycles by changing the speed.
  * @name loopAt
- * @tags temporal
+ * @tags samples, pitch
  * @memberof Pattern
  * @returns Pattern
  * @example
  * samples({ rhodes: 'https://cdn.freesound.org/previews/132/132051_316502-lq.mp3' })
  * s("rhodes").loopAt(2)
  */
-// TODO - global cps clock
 const _loopAt = function (factor, pat, cps = 0.5) {
   return pat
     .speed((1 / factor) * cps)
@@ -3479,11 +3505,16 @@ const _loopAt = function (factor, pat, cps = 0.5) {
     .slow(factor);
 };
 
+export const { loopAt, loopat } = register(['loopAt', 'loopat'], function (factor, pat) {
+  const steps = pat._steps ? pat._steps.div(factor) : undefined;
+  return new Pattern((state) => _loopAt(factor, pat, state.controls._cps).query(state), steps);
+});
+
 /**
  * Chops samples into the given number of slices, triggering those slices with a given pattern of slice numbers.
  * Instead of a number, it also accepts a list of numbers from 0 to 1 to slice at specific points.
  * @name slice
- * @tags temporal
+ * @tags samples
  * @memberof Pattern
  * @returns Pattern
  * @example
@@ -3537,7 +3568,7 @@ Pattern.prototype.onTriggerTime = function (func) {
 /**
  * Works the same as slice, but changes the playback speed of each slice to match the duration of its step.
  * @name splice
- * @tags temporal
+ * @tags samples, pitch
  * @example
  * samples('github:tidalcycles/dirt-samples')
  * s("breaks165")
@@ -3566,16 +3597,11 @@ export const splice = register(
   false, // turns off auto-patternification
 );
 
-export const { loopAt, loopat } = register(['loopAt', 'loopat'], function (factor, pat) {
-  const steps = pat._steps ? pat._steps.div(factor) : undefined;
-  return new Pattern((state) => _loopAt(factor, pat, state.controls._cps).query(state), steps);
-});
-
 /**
  * Makes the sample fit its event duration. Good for rhythmical loops like drum breaks.
  * Similar to `loopAt`.
  * @name fit
- * @tags temporal
+ * @tags samples, pitch
  * @example
  * samples({ rhodes: 'https://cdn.freesound.org/previews/132/132051_316502-lq.mp3' })
  * s("rhodes/2").fit()
@@ -3597,18 +3623,16 @@ export const fit = register('fit', (pat) =>
 
 /**
  * Makes the sample fit the given number of cycles and cps value, by
- * changing the speed. Please note that at some point cps will be
- * given by a global clock and this function will be
- * deprecated/removed.
+ * changing the speed. deprecated: use loopAt or fit instead, together with setCps / setCpm.
  * @name loopAtCps
- * @tags temporal
+ * @tags samples, pitch
  * @memberof Pattern
+ * @deprecated
  * @returns Pattern
  * @example
  * samples({ rhodes: 'https://cdn.freesound.org/previews/132/132051_316502-lq.mp3' })
  * s("rhodes").loopAtCps(4,1.5).cps(1.5)
  */
-// TODO - global cps clock
 export const { loopAtCps, loopatcps } = register(['loopAtCps', 'loopatcps'], function (factor, cps, pat) {
   return _loopAt(factor, pat, cps);
 });
@@ -3630,7 +3654,7 @@ let fadeGain = (p) => (p < 0.5 ? 1 : 1 - (p - 0.5) / 0.5);
  * - 1 = (no left, full right)
  *
  * @name xfade
- * @tags combiners
+ * @tags amplitude
  * @example
  * xfade(s("bd*2"), "<0 .25 .5 .75 1>", s("hh*8"))
  */
@@ -3756,7 +3780,7 @@ const _distortWithAlg = function (name) {
  * Soft-clipping distortion
  *
  * @name soft
- * @tags fx
+ * @tags distortion, superdough
  * @param {number | Pattern} distortion amount of distortion to apply
  * @param {number | Pattern} volume linear postgain of the distortion
  *
@@ -3767,7 +3791,7 @@ export const soft = _distortWithAlg('soft');
  * Hard-clipping distortion
  *
  * @name hard
- * @tags fx
+ * @tags distortion, superdough
  * @param {number | Pattern} distortion amount of distortion to apply
  * @param {number | Pattern} volume linear postgain of the distortion
  *
@@ -3778,7 +3802,7 @@ export const hard = _distortWithAlg('hard');
  * Cubic polynomial distortion
  *
  * @name cubic
- * @tags fx
+ * @tags distortion, superdough
  * @param {number | Pattern} distortion amount of distortion to apply
  * @param {number | Pattern} volume linear postgain of the distortion
  *
@@ -3789,7 +3813,7 @@ export const cubic = _distortWithAlg('cubic');
  * Diode-emulating distortion
  *
  * @name diode
- * @tags fx
+ * @tags distortion, superdough
  * @param {number | Pattern} distortion amount of distortion to apply
  * @param {number | Pattern} volume linear postgain of the distortion
  *
@@ -3800,7 +3824,7 @@ export const diode = _distortWithAlg('diode');
  * Asymmetrical diode distortion
  *
  * @name asym
- * @tags fx
+ * @tags distortion, superdough
  * @param {number | Pattern} distortion amount of distortion to apply
  * @param {number | Pattern} volume linear postgain of the distortion
  *
@@ -3811,7 +3835,7 @@ export const asym = _distortWithAlg('asym');
  * Wavefolding distortion
  *
  * @name fold
- * @tags fx
+ * @tags distortion, superdough
  * @param {number | Pattern} distortion amount of distortion to apply
  * @param {number | Pattern} volume linear postgain of the distortion
  *
@@ -3822,7 +3846,7 @@ export const fold = _distortWithAlg('fold');
  * Wavefolding distortion composed with sinusoid
  *
  * @name sinefold
- * @tags fx
+ * @tags distortion, superdough
  * @param {number | Pattern} distortion amount of distortion to apply
  * @param {number | Pattern} volume linear postgain of the distortion
  *
@@ -3833,7 +3857,7 @@ export const sinefold = _distortWithAlg('sinefold');
  * Distortion via Chebyshev polynomials
  *
  * @name chebyshev
- * @tags fx
+ * @tags distortion, superdough
  * @param {number | Pattern} distortion amount of distortion to apply
  * @param {number | Pattern} volume linear postgain of the distortion
  *
@@ -3867,7 +3891,7 @@ const _ensureListPattern = (list) => {
  * Can also be used to create a new synth via `s('user').partials(...)`
  *
  * @name partials
- * @tags fx, superdough
+ * @tags superdough
  * @param {number[] | Pattern} magnitudes List of [0, 1] magnitudes for partials. 0th entry is the fundamental harmonic (i.e. DC offset is skipped)
  * @example
  * s("user").seg(16).n(irand(8)).scale("A:major")
@@ -3889,7 +3913,7 @@ export const partials = (list) => {
  * Rotates the harmonics of one of the core synths ('sine', 'tri', 'saw', 'user', ..) by a list of phases
  *
  * @name phases
- * @tags fx, superdough
+ * @tags superdough
  * @param {number[] | Pattern} phases List of [0, 1) phases for partials. 0th entry is the fundamental phase (i.e. DC offset is skipped)
  * @example
  * // Phase cancellation
@@ -3911,7 +3935,7 @@ export const phases = (list) => {
  * calls and/or in a single .FX(fx1, fx2, ..) call. The fx1, .. are _patterns_ which
  * establish the controls of the given effect. See examples.
  * @name FX
- * @tags fx, superdough
+ * @tags superdough
  * @memberof Pattern
  * @returns Pattern
  * @example
@@ -3962,7 +3986,7 @@ const _asArrayPattern = (pats) => {
  *     by wrapping them inside a function in K (see example).
  *
  * @name K
- * @tags generators, fx, superdough
+ * @tags generators, superdough
  * @param {KabelsalatExpression | Function} expr Kabelsalat graph definition
  * @memberof Pattern
  * @returns Pattern
diff --git a/packages/core/pick.mjs b/packages/core/pick.mjs
index cce691905..93b8acd4f 100644
--- a/packages/core/pick.mjs
+++ b/packages/core/pick.mjs
@@ -78,7 +78,7 @@ export const pickmod = register('pickmod', function (lookup, pat) {
  * s("bd [rim hh]").pickF("<0 1 2>", [rev,jux(rev),fast(2)])
  * @example
  * note("<c2 d2>(3,8)").s("square")
- *     .pickF("<0 2> 1", [jux(rev),fast(2),x=>x.lpf(800)])
+ * .pickF("<0 2> 1", [jux(rev), fast(2), x=>x.lpf(800)])
  */
 export const pickF = register('pickF', function (lookup, funcs, pat) {
   return pat.apply(pick(lookup, funcs));
@@ -167,20 +167,22 @@ export const pickmodReset = register('pickmodReset', function (lookup, pat) {
 });
 
 /** Picks patterns (or plain values) either from a list (by index) or a lookup table (by name).
-   * Similar to `pick`, but cycles are squeezed into the target ('inhabited') pattern.
-   * @name inhabit
-   * @tags combiners
-   * @synonyms pickSqueeze
-   * @param {Pattern} pat
-   * @param {*} xs
-   * @returns {Pattern}
-   * @example
-   * "<a b [a,b]>".inhabit({a: s("bd(3,8)"),
-                            b: s("cp sd")
-                           })
-   * @example
-   * s("a@2 [a b] a".inhabit({a: "bd(3,8)", b: "sd sd"})).slow(4)
-   */
+ * Similar to `pick`, but cycles are squeezed into the target ('inhabited') pattern.
+ * @name inhabit
+ * @tags combiners
+ * @synonyms pickSqueeze
+ * @param {Pattern} pat
+ * @param {*} xs
+ * @returns {Pattern}
+ * @example
+ * let a = s("bd(3,8)")
+ * let b = s("cp sd")
+ * "<a b [a,b]>".inhabit({ a, b })
+ * @example
+ * s("a@2 [a b] a"
+ * .inhabit({a: "bd(3,8)", b: "sd sd"}))
+ * .slow(4)
+ */
 export const { inhabit, pickSqueeze } = register(['inhabit', 'pickSqueeze'], function (lookup, pat) {
   return _pick(lookup, pat, false).squeezeJoin();
 });
diff --git a/packages/core/repl.mjs b/packages/core/repl.mjs
index 3ff43e2f0..c1b539819 100644
--- a/packages/core/repl.mjs
+++ b/packages/core/repl.mjs
@@ -12,7 +12,6 @@ import {
 import { evalScope } from './evaluate.mjs';
 import { register, Pattern, isPattern, silence, stack } from './pattern.mjs';
 import { reset_state } from './impure.mjs';
-import { SalatRepl } from '@kabelsalat/web';
 
 export function repl({
   defaultOutput,
@@ -31,7 +30,6 @@ export function repl({
   id,
   mondo = false,
 }) {
-  const kabel = new SalatRepl({ localScope: true });
   const state = {
     schedulerError: undefined,
     evalError: undefined,
@@ -211,11 +209,6 @@ export function repl({
     return silence;
   };
 
-  const compileKabel = (code) => {
-    const node = kabel.evaluate(code);
-    return node.compile({ log: false });
-  };
-
   // helper to get a patternified pure value out
   function unpure(pat) {
     if (pat._Pattern) {
@@ -396,7 +389,6 @@ export function repl({
       setcps: setCps,
       setCpm,
       setcpm: setCpm,
-      compileKabel,
     });
   };
 
diff --git a/packages/midi/midi.mjs b/packages/midi/midi.mjs
index 8ce26c2a6..bb52b994f 100644
--- a/packages/midi/midi.mjs
+++ b/packages/midi/midi.mjs
@@ -138,7 +138,7 @@ function githubPath(base, subpath = '') {
 
 /**
  * configures the default midimap, which is used when no "midimap" port is set
- * @tags external_io
+ * @tags external_io, midi
  * @example
  * defaultmidimap({ lpf: 74 })
  * $: note("c a f e").midi();
@@ -152,7 +152,7 @@ let loadCache = {};
 
 /**
  * Adds midimaps to the registry. Inside each midimap, control names (e.g. lpf) are mapped to cc numbers.
- * @tags external_io
+ * @tags external_io, midi
  * @example
  * midimaps({ mymap: { lpf: 74 } })
  * $: note("c a f e")
@@ -529,7 +529,7 @@ async function _initialize(input) {
  * The output is a function that accepts a midi cc value to query as well as (optionally) a midi channel
  *
  * @name midin
- * @tags external_io
+ * @tags external_io, midi
  * @param {string | number} input MIDI device name or index defaulting to 0
  * @returns {function(number, number=): Pattern} A function from (cc, channel?) to a pattern.
  *   When queried, the pattern will produces the most recently received midi value (normalized to 0 to 1)
@@ -577,7 +577,7 @@ export async function midin(input) {
  * note durations
  *
  * @name midikeys
- * @tags external_io
+ * @tags external_io, midi
  * @param {string | number} input MIDI device name or index defaulting to 0
  * @returns {function((number | Pattern)=): Pattern} A function that produces a pattern.
  *   When queried, the pattern will produces the most recently played midi notes and velocities,
diff --git a/packages/superdough/modulators.mjs b/packages/superdough/modulators.mjs
index 05674baa0..76fc4c7fd 100644
--- a/packages/superdough/modulators.mjs
+++ b/packages/superdough/modulators.mjs
@@ -98,6 +98,7 @@ export const connectLFO = (id, params, nodeTracker) => {
     fxi = 'main',
     depth = 1,
     depthabs,
+    retrig = 0,
     ...filteredParams
   } = params;
   const { targetParams, paramName } = getTargetParamsForControl(control, nodeTracker[fxi], subControl);
@@ -109,7 +110,7 @@ export const connectLFO = (id, params, nodeTracker) => {
   const modParams = {
     ...filteredParams,
     frequency: sync !== undefined ? sync * cps : rate,
-    time: cycle / cps,
+    time: retrig > 0.5 ? 0 : cycle / cps,
     depth: depthValue,
     min,
     max,
diff --git a/packages/superdough/package.json b/packages/superdough/package.json
index 8e2ffad63..ce17ab5e5 100644
--- a/packages/superdough/package.json
+++ b/packages/superdough/package.json
@@ -37,6 +37,7 @@
   },
   "dependencies": {
     "@kabelsalat/lib": "^0.4.1",
+    "@kabelsalat/web": "^0.4.1",
     "nanostores": "^0.11.3"
   },
   "engines": {
diff --git a/packages/superdough/superdough.mjs b/packages/superdough/superdough.mjs
index 529392e99..4ce8164bc 100644
--- a/packages/superdough/superdough.mjs
+++ b/packages/superdough/superdough.mjs
@@ -40,7 +40,7 @@ export let maxPolyphony = DEFAULT_MAX_POLYPHONY;
  * start to die out in first-in-first-out order once the max polyphony has been hit
  *
  * @name setMaxPolyphony
- * @tags fx, superdough
+ * @tags superdough
  * @param {number} Max polyphony. Defaults to 128
  * @example
  * setMaxPolyphony(4)
@@ -74,7 +74,7 @@ export function applyGainCurve(val) {
  * quadratic, exponential, etc. rather than linear
  *
  * @name setGainCurve
- * @tags fx, superdough
+ * @tags amplitude, superdough
  * @param {Function} function to apply to all gain values
  * @example
  * setGainCurve((x) => x * x) // quadratic gain
@@ -260,6 +260,14 @@ export function loadWorklets() {
   return workletsLoading;
 }
 
+let kabel;
+async function initKabelsalat() {
+  const { SalatRepl } = await import('@kabelsalat/web');
+  logger('[kabelsalat] ready');
+  kabel = new SalatRepl({ localScope: true });
+  return kabel;
+}
+
 // this function should be called on first user interaction (to avoid console warning)
 export async function initAudio(options = {}) {
   const {
@@ -306,6 +314,7 @@ export async function initAudio(options = {}) {
   } catch (err) {
     console.warn('could not load AudioWorklet effects', err);
   }
+  await initKabelsalat();
   logger('[superdough] ready');
 }
 let audioReady;
@@ -441,6 +450,14 @@ class Chain {
   }
 }
 
+const compileKabel = (code) => {
+  if (!kabel) {
+    throw new Error('kabelsalat not loaded');
+  }
+  const node = kabel.evaluate(code);
+  return node.compile({ log: false });
+};
+
 export const superdough = async (value, t, hapDuration, cps = 0.5, cycle = 0.5) => {
   // mapping from main FX and numbered FX chains to nodes
   const nodes = { main: {} };
diff --git a/packages/superdough/wavetable.mjs b/packages/superdough/wavetable.mjs
index 79519b5f0..9c2974fdf 100644
--- a/packages/superdough/wavetable.mjs
+++ b/packages/superdough/wavetable.mjs
@@ -186,7 +186,7 @@ export function registerWaveTable(key, tables, params) {
  * Loads a collection of wavetables to use with `s`
  *
  * @name tables
- * @tags fx
+ * @tags wavetable
  */
 export const tables = async (url, frameLen, json, options = {}) => {
   if (json !== undefined) return _processTables(json, url, frameLen);
diff --git a/packages/tonal/tonal.mjs b/packages/tonal/tonal.mjs
index 2d197a7ed..4bba4561a 100644
--- a/packages/tonal/tonal.mjs
+++ b/packages/tonal/tonal.mjs
@@ -100,7 +100,7 @@ function scaleOffset(scale, offset, note) {
  * - 5P = perfect fifth
  * - 5d = diminished fifth
  *
- * @tags music_theory
+ * @tags tonal
  * @param {string | number} amount Either number of semitones or interval string.
  * @returns Pattern
  * @memberof Pattern
@@ -155,7 +155,7 @@ export const { transpose, trans } = register(['transpose', 'trans'], function tr
  *
  * @memberof Pattern
  * @name scaleTranspose
- * @tags music_theory
+ * @tags tonal
  * @param {offset} offset number of steps inside the scale
  * @returns Pattern
  * @synonyms scaleTrans, strans
@@ -246,7 +246,7 @@ function _getNearestScaleNote(scaleName, note, preferHigher = true) {
  * The root note defaults to octave 3, if no octave number is given.
  *
  * @name scale
- * @tags music_theory
+ * @tags tonal
  * @param {string} scale Name of scale
  * @returns Pattern
  * @example
diff --git a/packages/tonal/voicings.mjs b/packages/tonal/voicings.mjs
index 6dce6ca8b..7dcc6a77b 100644
--- a/packages/tonal/voicings.mjs
+++ b/packages/tonal/voicings.mjs
@@ -90,7 +90,7 @@ export const setVoicingRange = (name, range) => addVoicings(name, voicingRegistr
  * Adds a new custom voicing dictionary.
  *
  * @name addVoicings
- * @tags music_theory
+ * @tags tonal
  * @memberof Pattern
  * @param {string} name identifier for the voicing dictionary
  * @param {Object} dictionary maps chord symbol to possible voicings
@@ -134,7 +134,7 @@ const getVoicing = (chord, dictionaryName, lastVoicing) => {
  * Uses [chord-voicings package](https://github.com/felixroos/chord-voicings#chord-voicings).
  *
  * @name voicings
- * @tags music_theory
+ * @tags tonal
  * @memberof Pattern
  * @param {string} dictionary which voicing dictionary to use.
  * @returns Pattern
@@ -159,7 +159,7 @@ export const voicings = register('voicings', function (dictionary, pat) {
  * Maps the chords of the incoming pattern to root notes in the given octave.
  *
  * @name rootNotes
- * @tags music_theory
+ * @tags tonal
  * @memberof Pattern
  * @param {octave} octave octave to use
  * @returns Pattern
@@ -192,7 +192,7 @@ export const rootNotes = register('rootNotes', function (octave, pat) {
  * If you pass a pattern of strings to voicing, they will be interpreted as chords.
  *
  * @name voicing
- * @tags music_theory
+ * @tags tonal
  * @returns Pattern
  * @example
  * n("0 1 2 3").chord("<C Am F G>").voicing()
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 53437f8f5..468ceacf1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -234,9 +234,6 @@ importers:
 
   packages/core:
     dependencies:
-      '@kabelsalat/web':
-        specifier: ^0.4.1
-        version: 0.4.1
       fraction.js:
         specifier: ^5.2.1
         version: 5.2.1
@@ -524,6 +521,9 @@ importers:
       '@kabelsalat/lib':
         specifier: ^0.4.1
         version: 0.4.1
+      '@kabelsalat/web':
+        specifier: ^0.4.1
+        version: 0.4.1
       nanostores:
         specifier: ^0.11.3
         version: 0.11.3
diff --git a/test/__snapshots__/examples.test.mjs.snap b/test/__snapshots__/examples.test.mjs.snap
index 284f18557..5c7b5cb54 100644
--- a/test/__snapshots__/examples.test.mjs.snap
+++ b/test/__snapshots__/examples.test.mjs.snap
@@ -1037,6 +1037,43 @@ exports[`runs examples > example "anchor" example index 0 1`] = `
 ]
 `;
 
+exports[`runs examples > example "anchor" example index 1 1`] = `
+[
+  "[ 0/1 → 1/8 | anchor:c4 note:60 ]",
+  "[ 1/8 → 1/4 | anchor:c4 note:62 ]",
+  "[ 1/4 → 3/8 | anchor:c4 note:64 ]",
+  "[ 3/8 → 1/2 | anchor:c4 note:65 ]",
+  "[ 1/2 → 5/8 | anchor:c4 note:67 ]",
+  "[ 5/8 → 3/4 | anchor:c4 note:69 ]",
+  "[ 3/4 → 7/8 | anchor:c4 note:71 ]",
+  "[ 7/8 → 1/1 | anchor:c4 note:72 ]",
+  "[ 1/1 → 9/8 | anchor:g4 note:67 ]",
+  "[ 9/8 → 5/4 | anchor:g4 note:68 ]",
+  "[ 5/4 → 11/8 | anchor:g4 note:70 ]",
+  "[ 11/8 → 3/2 | anchor:g4 note:72 ]",
+  "[ 3/2 → 13/8 | anchor:g4 note:73 ]",
+  "[ 13/8 → 7/4 | anchor:g4 note:75 ]",
+  "[ 7/4 → 15/8 | anchor:g4 note:77 ]",
+  "[ 15/8 → 2/1 | anchor:g4 note:79 ]",
+  "[ 2/1 → 17/8 | anchor:c5 note:72 ]",
+  "[ 17/8 → 9/4 | anchor:c5 note:74 ]",
+  "[ 9/4 → 19/8 | anchor:c5 note:76 ]",
+  "[ 19/8 → 5/2 | anchor:c5 note:77 ]",
+  "[ 5/2 → 21/8 | anchor:c5 note:79 ]",
+  "[ 21/8 → 11/4 | anchor:c5 note:81 ]",
+  "[ 11/4 → 23/8 | anchor:c5 note:83 ]",
+  "[ 23/8 → 3/1 | anchor:c5 note:84 ]",
+  "[ 3/1 → 25/8 | anchor:g5 note:79 ]",
+  "[ 25/8 → 13/4 | anchor:g5 note:80 ]",
+  "[ 13/4 → 27/8 | anchor:g5 note:82 ]",
+  "[ 27/8 → 7/2 | anchor:g5 note:84 ]",
+  "[ 7/2 → 29/8 | anchor:g5 note:85 ]",
+  "[ 29/8 → 15/4 | anchor:g5 note:87 ]",
+  "[ 15/4 → 31/8 | anchor:g5 note:89 ]",
+  "[ 31/8 → 4/1 | anchor:g5 note:91 ]",
+]
+`;
+
 exports[`runs examples > example "apply" example index 0 1`] = `
 [
   "[ 0/1 → 1/1 | note:C3 ]",
@@ -4193,6 +4230,27 @@ exports[`runs examples > example "extend" example index 0 1`] = `
 ]
 `;
 
+exports[`runs examples > example "fadeTime" example index 0 1`] = `
+[
+  "[ 0/1 → 1/4 | s:oh end:0.1 fadeTime:0 ]",
+  "[ 1/4 → 1/2 | s:oh end:0.1 fadeTime:0 ]",
+  "[ 1/2 → 3/4 | s:oh end:0.1 fadeTime:0 ]",
+  "[ 3/4 → 1/1 | s:oh end:0.1 fadeTime:0 ]",
+  "[ 1/1 → 5/4 | s:oh end:0.1 fadeTime:0.2 ]",
+  "[ 5/4 → 3/2 | s:oh end:0.1 fadeTime:0.2 ]",
+  "[ 3/2 → 7/4 | s:oh end:0.1 fadeTime:0.2 ]",
+  "[ 7/4 → 2/1 | s:oh end:0.1 fadeTime:0.2 ]",
+  "[ 2/1 → 9/4 | s:oh end:0.1 fadeTime:0.4 ]",
+  "[ 9/4 → 5/2 | s:oh end:0.1 fadeTime:0.4 ]",
+  "[ 5/2 → 11/4 | s:oh end:0.1 fadeTime:0.4 ]",
+  "[ 11/4 → 3/1 | s:oh end:0.1 fadeTime:0.4 ]",
+  "[ 3/1 → 13/4 | s:oh end:0.1 fadeTime:0.8 ]",
+  "[ 13/4 → 7/2 | s:oh end:0.1 fadeTime:0.8 ]",
+  "[ 7/2 → 15/4 | s:oh end:0.1 fadeTime:0.8 ]",
+  "[ 15/4 → 4/1 | s:oh end:0.1 fadeTime:0.8 ]",
+]
+`;
+
 exports[`runs examples > example "fanchor" example index 0 1`] = `
 [
   "[ 0/1 → 1/8 | note:f s:sawtooth cutoff:1000 lpenv:8 fanchor:0 ]",
@@ -8099,6 +8157,48 @@ exports[`runs examples > example "panchor" example index 0 1`] = `
 ]
 `;
 
+exports[`runs examples > example "panspan" example index 0 1`] = `
+[
+  "[ 0/1 → 1/4 | s:bd pan:0.5 panspan:0 ]",
+  "[ 1/4 → 1/2 | s:hh pan:0.5 panspan:0 ]",
+  "[ 1/2 → 3/4 | s:bd pan:0.5 panspan:0 ]",
+  "[ 3/4 → 1/1 | s:hh pan:0.5 panspan:0 ]",
+  "[ 1/1 → 5/4 | s:bd pan:1 panspan:0.5 ]",
+  "[ 5/4 → 3/2 | s:hh pan:1 panspan:0.5 ]",
+  "[ 3/2 → 7/4 | s:bd pan:1 panspan:0.5 ]",
+  "[ 7/4 → 2/1 | s:hh pan:1 panspan:0.5 ]",
+  "[ 2/1 → 9/4 | s:bd pan:0.5 panspan:1 ]",
+  "[ 9/4 → 5/2 | s:hh pan:0.5 panspan:1 ]",
+  "[ 5/2 → 11/4 | s:bd pan:0.5 panspan:1 ]",
+  "[ 11/4 → 3/1 | s:hh pan:0.5 panspan:1 ]",
+  "[ 3/1 → 13/4 | s:bd pan:0 panspan:0 ]",
+  "[ 13/4 → 7/2 | s:hh pan:0 panspan:0 ]",
+  "[ 7/2 → 15/4 | s:bd pan:0 panspan:0 ]",
+  "[ 15/4 → 4/1 | s:hh pan:0 panspan:0 ]",
+]
+`;
+
+exports[`runs examples > example "pansplay" example index 0 1`] = `
+[
+  "[ 0/1 → 1/4 | s:bd pan:0.5 pansplay:0 ]",
+  "[ 1/4 → 1/2 | s:hh pan:0.5 pansplay:0 ]",
+  "[ 1/2 → 3/4 | s:bd pan:0.5 pansplay:0 ]",
+  "[ 3/4 → 1/1 | s:hh pan:0.5 pansplay:0 ]",
+  "[ 1/1 → 5/4 | s:bd pan:1 pansplay:0.5 ]",
+  "[ 5/4 → 3/2 | s:hh pan:1 pansplay:0.5 ]",
+  "[ 3/2 → 7/4 | s:bd pan:1 pansplay:0.5 ]",
+  "[ 7/4 → 2/1 | s:hh pan:1 pansplay:0.5 ]",
+  "[ 2/1 → 9/4 | s:bd pan:0.5 pansplay:1 ]",
+  "[ 9/4 → 5/2 | s:hh pan:0.5 pansplay:1 ]",
+  "[ 5/2 → 11/4 | s:bd pan:0.5 pansplay:1 ]",
+  "[ 11/4 → 3/1 | s:hh pan:0.5 pansplay:1 ]",
+  "[ 3/1 → 13/4 | s:bd pan:0 pansplay:0 ]",
+  "[ 13/4 → 7/2 | s:hh pan:0 pansplay:0 ]",
+  "[ 7/2 → 15/4 | s:bd pan:0 pansplay:0 ]",
+  "[ 15/4 → 4/1 | s:hh pan:0 pansplay:0 ]",
+]
+`;
+
 exports[`runs examples > example "partials" example index 0 1`] = `
 [
   "[ 0/1 → 1/16 | s:user note:A3 partials:[1 0 1 0 0 1] ]",
@@ -10874,6 +10974,35 @@ exports[`runs examples > example "seqPLoop" example index 0 1`] = `
 ]
 `;
 
+exports[`runs examples > example "setDefaultJoin" example index 0 1`] = `
+[
+  "[ 0/1 → 1/4 | s:saw velocity:1 note:F delay:0 ]",
+  "[ 1/4 → 1/3 | s:saw velocity:1 note:A delay:0 ]",
+  "[ 1/3 → 1/2 | s:saw velocity:1 note:A delay:0.2 ]",
+  "[ 1/2 → 2/3 | s:saw velocity:0.5 note:C delay:0.2 ]",
+  "[ 2/3 → 3/4 | s:saw velocity:0.5 note:C delay:0.3 ]",
+  "[ 3/4 → 1/1 | s:saw velocity:0.5 note:E delay:0.3 ]",
+  "[ 1/1 → 5/4 | s:saw velocity:1 note:F delay:0 ]",
+  "[ 5/4 → 4/3 | s:saw velocity:1 note:A delay:0 ]",
+  "[ 4/3 → 3/2 | s:saw velocity:1 note:A delay:0.2 ]",
+  "[ 3/2 → 5/3 | s:saw velocity:0.5 note:C delay:0.2 ]",
+  "[ 5/3 → 7/4 | s:saw velocity:0.5 note:C delay:0.3 ]",
+  "[ 7/4 → 2/1 | s:saw velocity:0.5 note:E delay:0.3 ]",
+  "[ 2/1 → 9/4 | s:saw velocity:1 note:F delay:0 ]",
+  "[ 9/4 → 7/3 | s:saw velocity:1 note:A delay:0 ]",
+  "[ 7/3 → 5/2 | s:saw velocity:1 note:A delay:0.2 ]",
+  "[ 5/2 → 8/3 | s:saw velocity:0.5 note:C delay:0.2 ]",
+  "[ 8/3 → 11/4 | s:saw velocity:0.5 note:C delay:0.3 ]",
+  "[ 11/4 → 3/1 | s:saw velocity:0.5 note:E delay:0.3 ]",
+  "[ 3/1 → 13/4 | s:saw velocity:1 note:F delay:0 ]",
+  "[ 13/4 → 10/3 | s:saw velocity:1 note:A delay:0 ]",
+  "[ 10/3 → 7/2 | s:saw velocity:1 note:A delay:0.2 ]",
+  "[ 7/2 → 11/3 | s:saw velocity:0.5 note:C delay:0.2 ]",
+  "[ 11/3 → 15/4 | s:saw velocity:0.5 note:C delay:0.3 ]",
+  "[ 15/4 → 4/1 | s:saw velocity:0.5 note:E delay:0.3 ]",
+]
+`;
+
 exports[`runs examples > example "setGainCurve" example index 0 1`] = `
 [
   "[ 0/1 → 1/4 | s:bd gain:0.5 ]",
diff --git a/vitest.setup.mjs b/vitest.setup.mjs
index ea965df6d..7b582a458 100644
--- a/vitest.setup.mjs
+++ b/vitest.setup.mjs
@@ -1,7 +1,9 @@
 import { afterEach } from 'vitest';
 import { useRNG } from './packages/core/signal.mjs';
+import { setDefaultJoin } from './packages/core/pattern.mjs';
 
 afterEach(() => {
   // Avoid bleed between tests
   useRNG('legacy');
+  setDefaultJoin('in');
 });
diff --git a/website/src/components/HeadCommon.astro b/website/src/components/HeadCommon.astro
index fe8d34bb2..550222e44 100644
--- a/website/src/components/HeadCommon.astro
+++ b/website/src/components/HeadCommon.astro
@@ -33,6 +33,7 @@ const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL
 <!-- the following variables are just a fallback to make sure everything is readable without JS -->
 <style is:global>
   :root {
+    color-scheme: dark;
     --background: #222;
     --lineBackground: #22222299;
     --foreground: #fff;
diff --git a/website/src/components/HeadCommonNext.astro b/website/src/components/HeadCommonNext.astro
index 1f878bac0..f477cd8f0 100644
--- a/website/src/components/HeadCommonNext.astro
+++ b/website/src/components/HeadCommonNext.astro
@@ -32,6 +32,7 @@ const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL
 <!-- the following variables are just a fallback to make sure everything is readable without JS -->
 <style is:global>
   :root {
+    color-scheme: dark;
     --background: #222;
     --lineBackground: #22222299;
     --foreground: #fff;
diff --git a/website/src/components/Udels/UdelsEditor.jsx b/website/src/components/Udels/UdelsEditor.jsx
index f58ac5fc7..b89576351 100644
--- a/website/src/components/Udels/UdelsEditor.jsx
+++ b/website/src/components/Udels/UdelsEditor.jsx
@@ -1,5 +1,5 @@
 import Loader from '@src/repl/components/Loader';
-import { HorizontalPanel } from '@src/repl/components/panel/Panel';
+import { BottomPanel } from '@src/repl/components/panel/Panel';
 import { Code } from '@src/repl/components/Code';
 import BigPlayButton from '@src/repl/components/BigPlayButton';
 import UserFacingErrorMessage from '@src/repl/components/UserFacingErrorMessage';
@@ -20,7 +20,7 @@ export default function UdelsEditor(Props) {
         <Code containerRef={containerRef} editorRef={editorRef} init={init} />
       </div>
       <UserFacingErrorMessage error={error} />
-      <HorizontalPanel context={context} />
+      <BottomPanel context={context} />
     </div>
   );
 }
diff --git a/website/src/repl/Repl.css b/website/src/repl/Repl.css
index b5cd34d81..a00600ae6 100644
--- a/website/src/repl/Repl.css
+++ b/website/src/repl/Repl.css
@@ -1,15 +1,3 @@
-:root {
-  --background: #222;
-  --lineBackground: #22222299;
-  --foreground: #fff;
-  --caret: #ffcc00;
-  --selection: rgba(128, 203, 196, 0.5);
-  --selectionMatch: #036dd626;
-  --lineHighlight: #00000050;
-  --gutterBackground: transparent;
-  --gutterForeground: #8a919966;
-}
-
 .darken::before {
   content: ' ';
   position: fixed;
diff --git a/website/src/repl/components/Code.jsx b/website/src/repl/components/Code.jsx
index 8481cc272..e8cccb86f 100644
--- a/website/src/repl/components/Code.jsx
+++ b/website/src/repl/components/Code.jsx
@@ -8,7 +8,7 @@ export function Code(Props) {
 
   return (
     <section
-      className={'text-gray-100 cursor-text pb-0 overflow-auto grow'}
+      className={'text-gray-100 cursor-text pb-0 overflow-auto grow z-10'}
       id="code"
       ref={(el) => {
         containerRef.current = el;
diff --git a/website/src/repl/components/EmbeddedReplEditor.jsx b/website/src/repl/components/EmbeddedReplEditor.jsx
index 74db2c655..100d5ad95 100644
--- a/website/src/repl/components/EmbeddedReplEditor.jsx
+++ b/website/src/repl/components/EmbeddedReplEditor.jsx
@@ -2,7 +2,7 @@ import Loader from '@src/repl/components/Loader';
 import { Code } from '@src/repl/components/Code';
 import BigPlayButton from '@src/repl/components/BigPlayButton';
 import UserFacingErrorMessage from '@src/repl/components/UserFacingErrorMessage';
-import { Header } from './Header';
+import { MainPanel } from './panel/Panel';
 
 // type Props = {
 //  context: replcontext,
@@ -14,7 +14,7 @@ export default function EmbeddedReplEditor(Props) {
   return (
     <div className="h-full flex flex-col relative" {...editorProps}>
       <Loader active={pending} />
-      <Header context={context} embedded={true} />
+      <MainPanel context={context} embedded={true} />
       <BigPlayButton started={started} handleTogglePlay={handleTogglePlay} />
       <div className="grow flex relative overflow-hidden">
         <Code containerRef={containerRef} editorRef={editorRef} init={init} />
diff --git a/website/src/repl/components/Header.jsx b/website/src/repl/components/Header.jsx
deleted file mode 100644
index ca4e1ecf9..000000000
--- a/website/src/repl/components/Header.jsx
+++ /dev/null
@@ -1,150 +0,0 @@
-import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon';
-import StopCircleIcon from '@heroicons/react/20/solid/StopCircleIcon';
-import cx from '@src/cx.mjs';
-import { useSettings, setIsZen } from '../../settings.mjs';
-import '../Repl.css';
-
-const { BASE_URL } = import.meta.env;
-const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
-
-export function Header({ context, embedded = false }) {
-  const { started, pending, isDirty, activeCode, handleTogglePlay, handleEvaluate, handleShuffle, handleShare } =
-    context;
-  const isEmbedded = typeof window !== 'undefined' && (embedded || window.location !== window.parent.location);
-  const { isZen, isButtonRowHidden, isCSSAnimationDisabled, fontFamily } = useSettings();
-
-  return (
-    <header
-      id="header"
-      className={cx(
-        'flex-none text-black  z-[100] text-lg select-none h-20 md:h-14',
-        !isZen && !isEmbedded && 'bg-lineHighlight',
-        isZen ? 'h-12 w-8 fixed top-0 left-0' : 'sticky top-0 w-full py-1 justify-between',
-        isEmbedded ? 'flex' : 'md:flex',
-      )}
-      style={{ fontFamily }}
-    >
-      <div className="px-4 flex space-x-2 md:pt-0 select-none">
-        <h1
-          onClick={() => {
-            if (isEmbedded) window.open(window.location.href.replace('embed', ''));
-          }}
-          className={cx(
-            isEmbedded ? 'text-l cursor-pointer' : 'text-xl',
-            'text-foreground font-bold flex space-x-2 items-center',
-          )}
-        >
-          <div
-            className={cx(
-              'mt-[1px]',
-              started && !isCSSAnimationDisabled && 'animate-spin',
-              'cursor-pointer text-blue-500',
-              isZen && 'fixed top-2 right-4',
-            )}
-            onClick={() => {
-              if (!isEmbedded) {
-                setIsZen(!isZen);
-              }
-            }}
-          >
-            <span className="block text-foreground rotate-90">꩜</span>
-          </div>
-          {!isZen && (
-            <div className="space-x-2">
-              <span className="">strudel</span>
-              <span className="text-sm font-medium">REPL</span>
-              {!isEmbedded && isButtonRowHidden && (
-                <a href={`${baseNoTrailing}/learn`} className="text-sm opacity-25 font-medium">
-                  DOCS
-                </a>
-              )}
-            </div>
-          )}
-        </h1>
-      </div>
-      {!isZen && !isButtonRowHidden && (
-        <div className="flex max-w-full overflow-auto text-foreground px-1 md:px-2">
-          <button
-            onClick={handleTogglePlay}
-            title={started ? 'stop' : 'play'}
-            className={cx(
-              !isEmbedded ? 'p-2' : 'px-2',
-              'hover:opacity-50',
-              !started && !isCSSAnimationDisabled && 'animate-pulse',
-            )}
-          >
-            {!pending ? (
-              <span className={cx('flex items-center space-x-2')}>
-                {started ? <StopCircleIcon className="w-6 h-6" /> : <PlayCircleIcon className="w-6 h-6" />}
-                {!isEmbedded && <span>{started ? 'stop' : 'play'}</span>}
-              </span>
-            ) : (
-              <>loading...</>
-            )}
-          </button>
-          <button
-            onClick={handleEvaluate}
-            title="update"
-            className={cx(
-              'flex items-center space-x-1',
-              !isEmbedded ? 'p-2' : 'px-2',
-              !isDirty || !activeCode ? 'opacity-50' : 'hover:opacity-50',
-            )}
-          >
-            {!isEmbedded && <span>update</span>}
-          </button>
-          {/* !isEmbedded && (
-            <button
-              title="shuffle"
-              className="hover:opacity-50 p-2 flex items-center space-x-1"
-              onClick={handleShuffle}
-            >
-              <span> shuffle</span>
-            </button>
-          ) */}
-          {!isEmbedded && (
-            <button
-              title="share"
-              className={cx(
-                'cursor-pointer hover:opacity-50 flex items-center space-x-1',
-                !isEmbedded ? 'p-2' : 'px-2',
-              )}
-              onClick={handleShare}
-            >
-              <span>share</span>
-            </button>
-          )}
-          {!isEmbedded && (
-            <a
-              title="learn"
-              href={`${baseNoTrailing}/workshop/getting-started/`}
-              className={cx('hover:opacity-50 flex items-center space-x-1', !isEmbedded ? 'p-2' : 'px-2')}
-            >
-              <span>learn</span>
-            </a>
-          )}
-          {/* {isEmbedded && (
-            <button className={cx('hover:opacity-50 px-2')}>
-              <a href={window.location.href} target="_blank" rel="noopener noreferrer" title="Open in REPL">
-                🚀
-              </a>
-            </button>
-          )}
-          {isEmbedded && (
-            <button className={cx('hover:opacity-50 px-2')}>
-              <a
-                onClick={() => {
-                  window.location.href = initialUrl;
-                  window.location.reload();
-                }}
-                title="Reset"
-              >
-                💔
-              </a>
-            </button>
-          )} */}
-        </div>
-      )}
-    </header>
-  );
-}
diff --git a/website/src/repl/components/ReplEditor.jsx b/website/src/repl/components/ReplEditor.jsx
index 23ceb122b..437475e61 100644
--- a/website/src/repl/components/ReplEditor.jsx
+++ b/website/src/repl/components/ReplEditor.jsx
@@ -1,8 +1,7 @@
-import Loader from '@src/repl/components/Loader';
-import { HorizontalPanel, VerticalPanel } from '@src/repl/components/panel/Panel';
 import { Code } from '@src/repl/components/Code';
+import Loader from '@src/repl/components/Loader';
+import { BottomPanel, MainPanel, RightPanel } from '@src/repl/components/panel/Panel';
 import UserFacingErrorMessage from '@src/repl/components/UserFacingErrorMessage';
-import { Header } from './Header';
 import { useSettings } from '@src/settings.mjs';
 
 // type Props = {
@@ -14,17 +13,22 @@ export default function ReplEditor(Props) {
   const { containerRef, editorRef, error, init, pending } = context;
   const settings = useSettings();
   const { panelPosition, isZen } = settings;
+  const isEmbedded = typeof window !== 'undefined' && window.location !== window.parent.location;
 
   return (
     <div className="h-full flex flex-col relative" {...editorProps}>
       <Loader active={pending} />
-      <Header context={context} />
-      <div className="grow flex relative overflow-hidden">
-        <Code containerRef={containerRef} editorRef={editorRef} init={init} />
-        {!isZen && panelPosition === 'right' && <VerticalPanel context={context} />}
+      <div className="flex flex-col grow overflow-hidden">
+        {/* <MainPanel context={context} isEmbedded={isEmbedded} className="hidden sm:block" /> */}
+        <MainPanel context={context} isEmbedded={isEmbedded} />
+        <div className="flex overflow-hidden h-full">
+          <Code containerRef={containerRef} editorRef={editorRef} init={init} />
+          {!isZen && panelPosition === 'right' && <RightPanel context={context} />}
+        </div>
       </div>
       <UserFacingErrorMessage error={error} />
-      {!isZen && panelPosition === 'bottom' && <HorizontalPanel context={context} />}
+      {!isZen && panelPosition === 'bottom' && <BottomPanel context={context} />}
+      {/* <MainPanel context={context} isEmbedded={isEmbedded} className="block sm:hidden" /> */}
     </div>
   );
 }
diff --git a/website/src/repl/components/button/action-button.jsx b/website/src/repl/components/button/action-button.jsx
index de674b696..245cf961e 100644
--- a/website/src/repl/components/button/action-button.jsx
+++ b/website/src/repl/components/button/action-button.jsx
@@ -2,7 +2,7 @@ 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}>
+    <button className={cx('hover:opacity-50 text-xs text-nowrap w-fit', className)} title={label} {...buttonProps}>
       {labelIsHidden !== true && label}
       {children}
     </button>
@@ -13,16 +13,13 @@ export function SpecialActionButton(props) {
   const { className, ...buttonProps } = props;
 
   return (
-    <ActionButton
-      {...buttonProps}
-      className={cx('bg-background p-2 max-w-[300px] rounded-md hover:opacity-50', className)}
-    />
+    <ActionButton {...buttonProps} className={cx('bg-background p-2 max-w-[300px] hover:opacity-50', className)} />
   );
 }
 
 export function ActionInput({ label, className, ...props }) {
   return (
-    <label className={cx('inline-flex items-center cursor-pointer', className)}>
+    <label className={cx('inline-flex items-center cursor-pointer ', className)}>
       <input {...props} className="sr-only peer" />
 
       <span className="inline-flex items-center peer-hover:opacity-50">{label}</span>
@@ -35,7 +32,7 @@ export function SpecialActionInput({ className, ...props }) {
     <ActionInput
       {...props}
       className={className}
-      label={<span className="bg-background p-2 max-w-[300px] rounded-md">{props.label}</span>}
+      label={<span className="bg-background p-2 max-w-[300px]">{props.label}</span>}
     />
   );
 }
diff --git a/website/src/repl/components/icons/SidebarIcon.jsx b/website/src/repl/components/icons/SidebarIcon.jsx
new file mode 100644
index 000000000..07966a2ab
--- /dev/null
+++ b/website/src/repl/components/icons/SidebarIcon.jsx
@@ -0,0 +1,19 @@
+export function SidebarIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="lucide lucide-panel-right-icon lucide-panel-right"
+    >
+      <rect width="18" height="18" x="3" y="3" rx="2" />
+      <path d="M15 3v18" />
+    </svg>
+  );
+}
diff --git a/website/src/repl/components/icons/StrudelIcon.jsx b/website/src/repl/components/icons/StrudelIcon.jsx
new file mode 100644
index 000000000..37df91685
--- /dev/null
+++ b/website/src/repl/components/icons/StrudelIcon.jsx
@@ -0,0 +1,13 @@
+// Source: https://commons.wikimedia.org/wiki/File:CHAM_PUNCTUATION_SPIRAL.svg
+// License: SIL Open Font License, Version 1.1. The license text is available at https://openfontlicense.org/open-font-license-official-text/
+export function StrudelIcon({ className = '' }) {
+  return (
+    <svg className={className} width="100%" height="100%" viewBox="0 0 213 213">
+      <g>
+        <g id="_1" serif:id="1">
+          <path d="M199.905,102.467c-0,17.959 -3.695,33.45 -11.078,46.468c-7.369,13.024 -17.9,23.079 -31.586,30.173c-13.673,7.093 -29.994,10.64 -48.961,10.64c-19.964,0 -37.183,-3.874 -51.66,-11.617c-14.482,-7.749 -25.592,-18.775 -33.334,-33.103c-7.749,-14.322 -11.617,-31.407 -11.617,-51.248l17.143,-0c-0,16.95 3.187,31.503 9.561,43.666c6.373,12.15 15.485,21.48 27.346,27.989c11.874,6.509 26.061,9.766 42.561,9.766c15.485,0 28.798,-2.898 39.94,-8.687c11.154,-5.789 19.693,-14.11 25.624,-24.956c5.943,-10.858 8.918,-23.812 8.918,-38.86c-0,-20.85 -5.5,-37.202 -16.5,-49.063c-11,-11.874 -26.344,-17.811 -46.031,-17.811c-17.515,-0 -31.266,4.883 -41.251,14.649c-9.991,9.767 -14.983,23.337 -14.983,40.711c-0,15.781 4.015,28.13 12.054,37.035c8.031,8.893 19.07,13.339 33.103,13.339c12.452,0 22.186,-3.431 29.196,-10.306c7.023,-6.888 10.538,-16.333 10.538,-28.348c-0,-10.281 -2.57,-18.415 -7.711,-24.416c-5.14,-6.014 -12.413,-9.021 -21.82,-9.021c-7.813,-0 -13.93,2.178 -18.351,6.528c-4.407,4.337 -6.605,10.197 -6.605,17.579c0,1.44 0.064,2.815 0.206,4.112c4.485,-7.363 11.141,-11.051 19.97,-11.051c5.5,-0 9.875,1.561 13.133,4.678c3.27,3.103 4.909,7.324 4.909,12.67c-0,5.796 -1.966,10.506 -5.886,14.136c-3.906,3.617 -9.265,5.423 -16.063,5.423c-8.533,-0 -15.337,-2.814 -20.407,-8.456c-5.076,-5.654 -7.607,-13.114 -7.607,-22.386c-0,-11.135 3.431,-19.957 10.306,-26.472c6.888,-6.528 16.121,-9.792 27.706,-9.792c13.467,0 24.03,4.164 31.689,12.491c7.672,8.327 11.515,19.584 11.515,33.771c-0,16.057 -4.884,28.753 -14.65,38.089c-9.767,9.343 -23.195,14.008 -40.274,14.008c-12.594,-0 -23.491,-2.603 -32.692,-7.814c-9.188,-5.204 -16.243,-12.625 -21.178,-22.257c-4.921,-9.625 -7.376,-21.023 -7.376,-34.182c0,-14.342 2.93,-26.64 8.79,-36.907c5.873,-10.281 14.271,-18.203 25.187,-23.774c10.93,-5.584 23.928,-8.379 38.989,-8.379c16.359,0 30.469,3.258 42.33,9.767c11.874,6.515 20.985,15.819 27.346,27.911c6.374,12.08 9.561,26.518 9.561,43.307Zm-86.408,-6.939c-7.235,-0 -11.867,4.491 -13.904,13.467c2.756,3.033 6.528,4.549 11.308,4.549c7.659,0 11.489,-3.11 11.489,-9.329c-0,-2.757 -0.797,-4.89 -2.39,-6.4c-1.581,-1.523 -3.746,-2.287 -6.503,-2.287Z" />
+        </g>
+      </g>
+    </svg>
+  );
+}
diff --git a/website/src/repl/components/incrementor/Incrementor.jsx b/website/src/repl/components/incrementor/Incrementor.jsx
index 0645580da..8fdfd4921 100644
--- a/website/src/repl/components/incrementor/Incrementor.jsx
+++ b/website/src/repl/components/incrementor/Incrementor.jsx
@@ -1,4 +1,4 @@
-import { Textbox } from '../textbox/Textbox';
+import { Textbox } from '@src/repl/components/panel/SettingsTab';
 import cx from '@src/cx.mjs';
 
 function IncButton({ children, className, ...buttonProps }) {
diff --git a/website/src/repl/components/panel/AudioDeviceSelector.jsx b/website/src/repl/components/panel/AudioDeviceSelector.jsx
index 288ffc0a5..1e41ed660 100644
--- a/website/src/repl/components/panel/AudioDeviceSelector.jsx
+++ b/website/src/repl/components/panel/AudioDeviceSelector.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import { SelectInput } from './SelectInput';
+import { SelectInputDuplicate } from '@src/repl/components/panel/SettingsTab';
 import { getAudioDevices } from '@strudel/webaudio';
 
 const initdevices = new Map();
@@ -29,7 +29,7 @@ export function AudioDeviceSelector({ audioDeviceName, onChange, isDisabled }) {
     options.set(deviceName, deviceName);
   });
   return (
-    <SelectInput
+    <SelectInputDuplicate
       isDisabled={isDisabled}
       options={options}
       onClick={onClick}
diff --git a/website/src/repl/components/panel/AudioEngineTargetSelector.jsx b/website/src/repl/components/panel/AudioEngineTargetSelector.jsx
index ecf5d8175..b428a59be 100644
--- a/website/src/repl/components/panel/AudioEngineTargetSelector.jsx
+++ b/website/src/repl/components/panel/AudioEngineTargetSelector.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { audioEngineTargets } from '../../../settings.mjs';
-import { SelectInput } from './SelectInput';
+import { SelectInputDuplicate } from '@src/repl/components/panel/SettingsTab';
 
 // Allows the user to select an audio interface for Strudel to play through
 export function AudioEngineTargetSelector({ target, onChange, isDisabled }) {
@@ -12,8 +12,8 @@ export function AudioEngineTargetSelector({ target, onChange, isDisabled }) {
     [audioEngineTargets.osc, audioEngineTargets.osc],
   ]);
   return (
-    <div className=" flex flex-col gap-1">
-      <SelectInput isDisabled={isDisabled} options={options} value={target} onChange={onTargetChange} />
+    <div className="flex flex-col gap-1">
+      <SelectInputDuplicate isDisabled={isDisabled} options={options} value={target} onChange={onTargetChange} />
       {target === audioEngineTargets.osc && (
         <div>
           <p className="text-sm italic">
diff --git a/website/src/repl/components/panel/ConsoleTab.jsx b/website/src/repl/components/panel/ConsoleTab.jsx
index c6a2403a5..54a8ff549 100644
--- a/website/src/repl/components/panel/ConsoleTab.jsx
+++ b/website/src/repl/components/panel/ConsoleTab.jsx
@@ -2,13 +2,23 @@ import cx from '@src/cx.mjs';
 import { useSettings } from '../../../settings.mjs';
 import { useStore } from '@nanostores/react';
 import { $strudel_log_history } from '../useLogger';
+import { useEffect, useRef } from 'react';
 
 export function ConsoleTab() {
   const log = useStore($strudel_log_history);
   const { fontFamily } = useSettings();
+  const scrollRef = useRef();
+  // scroll to bottom when log changes
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [log]);
   return (
-    <div id="console-tab" className="break-all w-full  first-line:text-sm p-2  h-full" style={{ fontFamily }}>
-      <div className="bg-background h-full w-full overflow-auto space-y-1 p-2 rounded-md">
+    <div id="console-tab" className="break-all w-full h-full" style={{ fontFamily }}>
+      <div className="h-full w-full overflow-auto space-y-1 p-2 rounded-md" ref={scrollRef}>
+        {' '}
+        {/* bg-background */}
         {log.map((l, i) => {
           const message = linkify(l.message);
           const color = l.data?.hap?.value?.color;
@@ -16,12 +26,13 @@ export function ConsoleTab() {
             <div
               key={l.id}
               className={cx(
+                'whitespace-nowrap',
                 l.type === 'error' ? 'text-background bg-foreground' : 'text-foreground',
                 l.type === 'highlight' && 'underline',
               )}
               style={color ? { color } : {}}
             >
-              <span dangerouslySetInnerHTML={{ __html: message }} />
+              <span dangerouslySetInnerHTML={{ __html: message }} className="whitespace-nowrap" />
               {l.count ? ` (${l.count})` : ''}
             </div>
           );
diff --git a/website/src/repl/components/panel/ExportTab.jsx b/website/src/repl/components/panel/ExportTab.jsx
index cbb132e44..1e953def2 100644
--- a/website/src/repl/components/panel/ExportTab.jsx
+++ b/website/src/repl/components/panel/ExportTab.jsx
@@ -1,10 +1,7 @@
-import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon';
 import cx from '@src/cx.mjs';
-import NumberInput from '@src/repl/components/NumberInput';
-import { useEffect, useState } from 'react';
-import { Textbox } from '../textbox/Textbox';
+import { useState } from 'react';
+import { Textbox } from '@src/repl/components/panel/SettingsTab';
 import { getAudioContext } from '@strudel/webaudio';
-import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
 
 function Checkbox({ label, value, onChange, disabled = false }) {
   return (
@@ -48,7 +45,7 @@ export default function ExportTab(Props) {
 
   return (
     <>
-      <div className="text-foreground w-full p-4 space-y-4">
+      <div className="text-foreground w-full space-y-4 p-4">
         <FormItem label="File name" disabled={exporting}>
           <Textbox
             onBlur={(e) => {
@@ -59,7 +56,7 @@ export default function ExportTab(Props) {
             }}
             disabled={exporting}
             placeholder="Leave empty to use current date"
-            className={cx('placeholder:opacity-50', exporting && 'opacity-50 border-opacity-50')}
+            className={cx('placeholder-muted', exporting && 'opacity-50 border-opacity-50')}
             value={downloadName ?? ''}
           />
         </FormItem>
diff --git a/website/src/repl/components/panel/Forms.jsx b/website/src/repl/components/panel/Forms.jsx
index 4cb73a469..8b4e8c0fe 100644
--- a/website/src/repl/components/panel/Forms.jsx
+++ b/website/src/repl/components/panel/Forms.jsx
@@ -1,15 +1,15 @@
 import cx from '@src/cx.mjs';
 
-export function ButtonGroup({ value, onChange, items }) {
+export function ButtonGroup({ value, onChange, items, wrap = false }) {
   return (
-    <div className="flex max-w-lg">
+    <div className={cx('flex max-w-lg space-x-0 text-xs', wrap && 'flex-wrap')}>
       {Object.entries(items).map(([key, label], i, arr) => (
         <button
           key={key}
           id={key}
           onClick={() => onChange(key)}
           className={cx(
-            'px-2 border-b h-8 whitespace-nowrap',
+            'px-2 border-b-2 h-8 whitespace-nowrap border-box max-h-8 hover:opacity-50',
             // i === 0 && 'rounded-l-md',
             // i === arr.length - 1 && 'rounded-r-md',
             // value === key ? 'bg-background' : 'bg-lineHighlight',
diff --git a/website/src/repl/components/panel/Panel.jsx b/website/src/repl/components/panel/Panel.jsx
index cfe90ae30..3b4dd5482 100644
--- a/website/src/repl/components/panel/Panel.jsx
+++ b/website/src/repl/components/panel/Panel.jsx
@@ -1,77 +1,204 @@
+import { Bars3Icon, PlayIcon, StopIcon, XMarkIcon } from '@heroicons/react/16/solid';
 import cx from '@src/cx.mjs';
-import { setPanelPinned, setActiveFooter as setTab, setIsPanelOpened, useSettings } from '../../../settings.mjs';
+import { StrudelIcon } from '@src/repl/components/icons/StrudelIcon';
+import { useSettings, setIsZen, setIsPanelOpened, setActiveFooter as setTab } from '../../../settings.mjs';
+import '../../Repl.css';
+import { useLogger } from '../useLogger';
 import { ConsoleTab } from './ConsoleTab';
+import ExportTab from './ExportTab';
 import { FilesTab } from './FilesTab';
+import { PatternsTab } from './PatternsTab';
 import { Reference } from './Reference';
 import { SettingsTab } from './SettingsTab';
 import { SoundsTab } from './SoundsTab';
-import { useLogger } from '../useLogger';
 import { WelcomeTab } from './WelcomeTab';
-import { PatternsTab } from './PatternsTab';
-import { ChevronLeftIcon, XMarkIcon } from '@heroicons/react/16/solid';
-import ExportTab from './ExportTab';
 
 const TAURI = typeof window !== 'undefined' && window.__TAURI__;
 
-export function HorizontalPanel({ context }) {
-  const settings = useSettings();
-  const { isPanelOpen, activeFooter: tab } = settings;
+const { BASE_URL } = import.meta.env;
+const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
 
+export function LogoButton({ context, isEmbedded }) {
+  const { started } = context;
+  const { isZen, isCSSAnimationDisabled, fontFamily } = useSettings();
+  return (
+    <div
+      className={cx(
+        'mt-[1px]',
+        started && !isCSSAnimationDisabled && 'animate-spin',
+        'cursor-pointer text-blue-500',
+        isZen && 'fixed top-2 right-4',
+      )}
+      onClick={() => {
+        if (!isEmbedded) {
+          setIsZen(!isZen);
+        }
+      }}
+    >
+      <span className="block text-foreground rotate-90">
+        <StrudelIcon className="w-5 h-5 fill-foreground" />
+      </span>
+    </div>
+  );
+}
+
+export function MainPanel({ context, isEmbedded = false, className }) {
+  const { isZen, isButtonRowHidden, fontFamily } = useSettings();
+  return (
+    <nav
+      id="header"
+      className={cx(
+        'flex-none text-black z-[100] text-sm select-none min-h-10 max-h-10',
+        !isZen && !isEmbedded && 'border-b border-muted bg-lineHighlight',
+        isZen ? 'h-12 w-8 fixed top-0 left-0' : '',
+        'flex items-center',
+        className,
+      )}
+      style={{ fontFamily }}
+    >
+      <div className={cx('flex w-full justify-between')}>
+        <div className="px-3 py-1 flex space-x-2 select-none">
+          <h1
+            onClick={() => {
+              if (isEmbedded) window.open(window.location.href.replace('embed', ''));
+            }}
+            className={cx(
+              isEmbedded ? 'text-l cursor-pointer' : 'text-xl',
+              'text-foreground font-bold flex space-x-2 items-center',
+            )}
+          >
+            <LogoButton context={context} isEmbedded={isEmbedded} />
+            {!isZen && (
+              <div className="space-x-2 flex items-baseline">
+                <span className="hidden sm:block">strudel</span>
+                <span className="text-sm font-medium hidden sm:block">REPL</span>
+              </div>
+            )}
+          </h1>
+        </div>
+        {!isZen && (
+          <div className="flex grow justify-end">
+            {!isButtonRowHidden && <MainMenu isEmbedded={isEmbedded} context={context} />}
+            <PanelToggle isEmbedded={isEmbedded} isZen={isZen} />
+          </div>
+        )}
+      </div>
+    </nav>
+  );
+}
+
+export function Footer({ context, isEmbedded = false }) {
+  return (
+    <div className="border-t border-muted bg-lineHighlight block lg:hidden">
+      <MainMenu context={context} isEmbedded={isEmbedded} />
+    </div>
+  );
+}
+
+function MainMenu({ context, isEmbedded = false, className }) {
+  const { started, pending, isDirty, activeCode, handleTogglePlay, handleEvaluate, handleShare } = context;
+  const { isCSSAnimationDisabled } = useSettings();
+  return (
+    <div className={cx('flex text-sm max-w-full shrink-0 overflow-hidden text-foreground px-2 h-10', className)}>
+      <button
+        onClick={handleTogglePlay}
+        title={started ? 'stop' : 'play'}
+        className={cx('px-2 hover:opacity-50', !started && !isCSSAnimationDisabled && 'animate-pulse')}
+      >
+        <span className={cx('flex items-center space-x-2')}>
+          {started ? <StopIcon className="w-5 h-5" /> : <PlayIcon className="w-5 h-5" />}
+          {!isEmbedded && <span>{pending ? '...' : started ? 'stop' : 'play'}</span>}
+        </span>
+      </button>
+      <button
+        onClick={handleEvaluate}
+        title="update"
+        className={cx('flex items-center space-x-1 px-2', !isDirty || !activeCode ? 'opacity-50' : 'hover:opacity-50')}
+      >
+        {!isEmbedded && <span>update</span>}
+      </button>
+      {!isEmbedded && (
+        <button
+          title="share"
+          className={cx('cursor-pointer hover:opacity-50 flex items-center space-x-1 px-2')}
+          onClick={handleShare}
+        >
+          <span>share</span>
+        </button>
+      )}
+      {!isEmbedded && (
+        <a
+          title="learn"
+          href={`${baseNoTrailing}/workshop/getting-started/`}
+          className={cx('hover:opacity-50 flex items-center space-x-1', !isEmbedded ? 'p-2' : 'px-2')}
+        >
+          <span>learn</span>
+        </a>
+      )}
+    </div>
+  );
+}
+
+function PanelCloseButton() {
+  const { isPanelOpen } = useSettings();
+  return (
+    isPanelOpen && (
+      <button
+        onClick={() => setIsPanelOpened(false)}
+        className={cx('px-2 py-0 text-foreground hover:opacity-50')}
+        aria-label="Close Menu"
+      >
+        <XMarkIcon className="w-6 h-6" />
+      </button>
+    )
+  );
+}
+
+export function BottomPanel({ context }) {
+  const { isPanelOpen, activeFooter: tab } = useSettings();
   return (
     <PanelNav
-      settings={settings}
-      className={cx(isPanelOpen ? `min-h-[360px] max-h-[360px]` : 'min-h-12 max-h-12', 'overflow-hidden flex flex-col')}
+      className={cx(
+        isPanelOpen ? `min-h-[360px] max-h-[360px]` : 'min-h-10 max-h-10',
+        'overflow-hidden flex flex-col relative',
+      )}
     >
+      <div className="flex justify-between min-h-10 max-h-10 grid-cols-2 items-center border-t border-muted">
+        <PanelCloseButton />
+        <Tabs setTab={setTab} tab={tab} className={cx(isPanelOpen && 'border-l border-muted')} />
+      </div>
       {isPanelOpen && (
-        <div className="flex h-full overflow-auto pr-10 ">
+        <div className="w-full h-full overflow-auto border-t border-muted">
           <PanelContent context={context} tab={tab} />
         </div>
       )}
-
-      <div className="absolute right-4 pt-4">
-        <PanelActionButton settings={settings} />
-      </div>
-
-      <div className="flex  justify-between min-h-12 max-h-12 grid-cols-2 items-center">
-        <Tabs setTab={setTab} tab={tab} />
-      </div>
     </PanelNav>
   );
 }
 
-export function VerticalPanel({ context }) {
+export function RightPanel({ context }) {
   const settings = useSettings();
   const { activeFooter: tab, isPanelOpen } = settings;
-
+  if (!isPanelOpen) {
+    return;
+  }
   return (
     <PanelNav
       settings={settings}
-      className={cx(isPanelOpen ? `min-w-[min(600px,80vw)] max-w-[min(600px,80vw)]` : 'min-w-12 max-w-12')}
-    >
-      {isPanelOpen ? (
-        <div className={cx('flex flex-col h-full')}>
-          <div className="flex justify-between w-full ">
-            <Tabs setTab={setTab} tab={tab} />
-            <PanelActionButton settings={settings} />
-          </div>
-
-          <div className="overflow-auto h-full">
-            <PanelContent context={context} tab={tab} />
-          </div>
-        </div>
-      ) : (
-        <button
-          onClick={(e) => {
-            setIsPanelOpened(true);
-          }}
-          aria-label="open menu panel"
-          className={cx(
-            'flex flex-col hover:bg-lineBackground items-center cursor-pointer justify-center w-full  h-full',
-          )}
-        >
-          <ChevronLeftIcon className="text-foreground opacity-50 w-6 h-6" />
-        </button>
+      className={cx(
+        'border-l border-muted shrink-0 h-full overflow-hidden',
+        isPanelOpen ? `min-w-[min(600px,100vw)] max-w-[min(600px,80vw)]` : 'min-w-12 max-w-12',
       )}
+    >
+      <div className={cx('flex flex-col h-full')}>
+        <div className="flex justify-between w-full overflow-hidden border-b border-muted min-h-10 max-h-10">
+          <PanelCloseButton />
+          <Tabs setTab={setTab} tab={tab} className="border-l border-muted" />
+        </div>
+        <div className="overflow-auto h-full">
+          <PanelContent context={context} tab={tab} />
+        </div>
+      </div>
     </PanelNav>
   );
 }
@@ -89,8 +216,8 @@ if (TAURI) {
   tabNames.files = 'files';
 }
 
-function PanelNav({ children, className, settings, ...props }) {
-  const isHoverBehavior = settings.togglePanelTrigger === 'hover';
+function PanelNav({ children, className, ...props }) {
+  const settings = useSettings();
   return (
     <nav
       onClick={() => {
@@ -98,18 +225,8 @@ function PanelNav({ children, className, settings, ...props }) {
           setIsPanelOpened(true);
         }
       }}
-      onMouseEnter={() => {
-        if (isHoverBehavior && !settings.isPanelOpen) {
-          setIsPanelOpened(true);
-        }
-      }}
-      onMouseLeave={() => {
-        if (isHoverBehavior && !settings.isPanelPinned) {
-          setIsPanelOpened(false);
-        }
-      }}
       aria-label="Menu Panel"
-      className={cx('bg-lineHighlight group overflow-x-auto', className)}
+      className={cx('h-full bg-lineHighlight group overflow-x-auto', className)}
       {...props}
     >
       {children}
@@ -145,7 +262,7 @@ function PanelTab({ label, isSelected, onClick }) {
       <button
         onClick={onClick}
         className={cx(
-          'h-8 px-2 text-foreground cursor-pointer hover:opacity-50 flex items-center space-x-1 border-b',
+          'h-10 px-2 text-sm border-t-2 border-t-transparent text-foreground cursor-pointer hover:opacity-50 flex items-center space-x-1 border-b-2',
           isSelected ? 'border-foreground' : 'border-transparent',
         )}
       >
@@ -154,65 +271,36 @@ function PanelTab({ label, isSelected, onClick }) {
     </>
   );
 }
-function Tabs({ setTab, tab, className }) {
+function Tabs({ className }) {
+  const { isPanelOpen, activeFooter: tab } = useSettings();
   return (
-    <div className={cx('flex select-none max-w-full overflow-auto pb-2', className)}>
+    <div
+      className={cx(
+        'px-2 w-full flex select-none max-w-full h-10 max-h-10 min-h-10 overflow-auto items-center',
+        className,
+      )}
+    >
       {Object.keys(tabNames).map((key) => {
         const val = tabNames[key];
-        return <PanelTab key={key} isSelected={tab === val} label={key} onClick={() => setTab(val)} />;
+        return <PanelTab key={key} isSelected={tab === val && isPanelOpen} label={key} onClick={() => setTab(val)} />;
       })}
     </div>
   );
 }
 
-function PanelActionButton({ settings }) {
-  const { togglePanelTrigger, isPanelPinned, isPanelOpen } = settings;
-  const isHoverBehavior = togglePanelTrigger === 'hover';
-  if (!isPanelOpen) {
-    return;
-  }
-
-  if (isHoverBehavior) {
-    return <PinButton pinned={isPanelPinned} />;
-  }
-  return <CloseButton onClick={() => setIsPanelOpened(false)} />;
-}
-
-function PinButton({ pinned }) {
+export function PanelToggle({ isEmbedded, isZen }) {
+  const { panelPosition, isPanelOpen } = useSettings();
   return (
-    <button
-      onClick={() => setPanelPinned(!pinned)}
-      className={cx(
-        'text-foreground max-h-8 min-h-8 max-w-8 min-w-8 items-center justify-center p-1.5 group-hover:flex',
-        pinned ? 'flex' : 'hidden',
-      )}
-      aria-label="Pin Menu Panel"
-    >
-      <svg
-        stroke="currentColor"
-        fill={'currentColor'}
-        strokeWidth="0"
-        className="w-full h-full"
-        opacity={pinned ? 1 : '.3'}
-        viewBox="0 0 16 16"
-        xmlns="http://www.w3.org/2000/svg"
+    !isEmbedded &&
+    !isZen &&
+    panelPosition === 'right' && (
+      <button
+        title="menu"
+        className={cx('border-l border-muted px-2 py-0 text-foreground hover:opacity-50')}
+        onClick={() => setIsPanelOpened(!isPanelOpen)}
       >
-        <path d="M9.828.722a.5.5 0 0 1 .354.146l4.95 4.95a.5.5 0 0 1 0 .707c-.48.48-1.072.588-1.503.588-.177 0-.335-.018-.46-.039l-3.134 3.134a6 6 0 0 1 .16 1.013c.046.702-.032 1.687-.72 2.375a.5.5 0 0 1-.707 0l-2.829-2.828-3.182 3.182c-.195.195-1.219.902-1.414.707s.512-1.22.707-1.414l3.182-3.182-2.828-2.829a.5.5 0 0 1 0-.707c.688-.688 1.673-.767 2.375-.72a6 6 0 0 1 1.013.16l3.134-3.133a3 3 0 0 1-.04-.461c0-.43.108-1.022.589-1.503a.5.5 0 0 1 .353-.146"></path>
-      </svg>
-    </button>
-  );
-}
-
-function CloseButton({ onClick }) {
-  return (
-    <button
-      onClick={onClick}
-      className={cx(
-        'text-foreground max-h-8 min-h-8 max-w-8 min-w-8 items-center justify-center p-1.5 group-hover:flex',
-      )}
-      aria-label="Close Menu"
-    >
-      <XMarkIcon />
-    </button>
+        <Bars3Icon className="w-6 h-6" />
+      </button>
+    )
   );
 }
diff --git a/website/src/repl/components/panel/PatternsTab.jsx b/website/src/repl/components/panel/PatternsTab.jsx
index c72ebaa30..44b280fb3 100644
--- a/website/src/repl/components/panel/PatternsTab.jsx
+++ b/website/src/repl/components/panel/PatternsTab.jsx
@@ -8,7 +8,7 @@ import {
   useViewingPatternData,
   userPattern,
 } from '../../../user_pattern_utils.mjs';
-import { useMemo } from 'react';
+import { useMemo, useRef } from 'react';
 import { getMetadata } from '../../../metadata_parser.js';
 import { useExamplePatterns } from '../../useExamplePatterns.jsx';
 import { parseJSON, isUdels } from '../../util.mjs';
@@ -18,7 +18,7 @@ import { Pagination } from '../pagination/Pagination.jsx';
 import { useState } from 'react';
 import { useDebounce } from '../usedebounce.jsx';
 import cx from '@src/cx.mjs';
-import { Textbox } from '../textbox/Textbox.jsx';
+import { Textbox } from '@src/repl/components/panel/SettingsTab.jsx';
 
 export function PatternLabel({ pattern } /* : { pattern: Tables<'code'> } */) {
   const meta = useMemo(() => getMetadata(pattern.code), [pattern]);
@@ -43,7 +43,7 @@ function PatternButton({ showOutline, onClick, pattern, showHiglight }) {
       className={cx(
         'mr-4 hover:opacity-50 cursor-pointer block',
         showOutline && 'outline outline-1',
-        showHiglight && 'bg-selection',
+        showHiglight && 'ring-selection',
       )}
       onClick={onClick}
     >
@@ -53,11 +53,10 @@ function PatternButton({ showOutline, onClick, pattern, showHiglight }) {
 }
 
 function PatternButtons({ patterns, activePattern, onClick, started }) {
-  const viewingPatternStore = useViewingPatternData();
-  const viewingPatternData = parseJSON(viewingPatternStore);
+  const viewingPatternData = useViewingPatternData();
   const viewingPatternID = viewingPatternData.id;
   return (
-    <div className="">
+    <div className="p-2">
       {Object.values(patterns)
         .reverse()
         .map((pattern) => {
@@ -83,8 +82,8 @@ const updateCodeWindow = (context, patternData, reset = false) => {
 export function PatternsTab({ context }) {
   const [search, setSearch] = useState('');
   const activePattern = useActivePattern();
-  const viewingPatternStore = useViewingPatternData();
-  const viewingPatternData = parseJSON(viewingPatternStore);
+  const viewingPatternData = useViewingPatternData();
+
   const { userPatterns, patternAutoStart } = useSettings();
   const viewingPatternID = viewingPatternData?.id;
 
@@ -121,74 +120,71 @@ export function PatternsTab({ context }) {
         );
       }),
     );
-  }, [search, viewingPatternStore]);
+  }, [search, userPatterns]);
 
+  const importRef = useRef();
   return (
-    <div className="px-4 w-full text-foreground  space-y-2  flex flex-col overflow-hidden max-h-full h-full">
-      <div className="w-full flex">
-        <Textbox className="w-full" placeholder="Search" value={search} onChange={setSearch} />
+    <div className="w-full h-full text-foreground flex flex-col overflow-hidden">
+      <Textbox className="w-full border-0" placeholder="Search..." value={search} onChange={setSearch} />
+      <div className="px-2 shrink-0 h-8 space-x-4 flex max-w-full overflow-x-auto border-y border-muted">
+        <ActionButton
+          label="new"
+          onClick={() => {
+            const { data } = userPattern.createAndAddToDB();
+            updateCodeWindow(context, data);
+          }}
+        />
+        <ActionButton
+          label="duplicate"
+          onClick={() => {
+            const { data } = userPattern.duplicate(viewingPatternData);
+            updateCodeWindow(context, data);
+          }}
+        />
+        <ActionButton
+          label="delete"
+          onClick={() => {
+            const { data } = userPattern.delete(viewingPatternID);
+            updateCodeWindow(context, { ...data, collection: userPattern.collection });
+          }}
+        />
+        <input
+          ref={importRef}
+          style={{ display: 'none' }}
+          type="file"
+          multiple
+          accept="text/plain,text/x-markdown,application/json"
+          onChange={(e) => importPatterns(e.target.files)}
+        />
+        <ActionButton label="import" onClick={() => importRef.current.click()} />
+        <ActionButton label="export" onClick={exportPatterns} />
+
+        <ActionButton
+          label="delete-all"
+          onClick={() => {
+            const { data } = userPattern.clearAll();
+            updateCodeWindow(context, data);
+          }}
+        />
       </div>
-      <div className="flex flex-col gap-2 flex-grow overflow-hidden h-full pb-2 ">
-        <div className="pr-4 space-x-4  flex max-w-full overflow-x-auto">
-          <ActionButton
-            label="new"
-            onClick={() => {
-              const { data } = userPattern.createAndAddToDB();
-              updateCodeWindow(context, data);
-            }}
-          />
-          <ActionButton
-            label="duplicate"
-            onClick={() => {
-              const { data } = userPattern.duplicate(viewingPatternData);
-              updateCodeWindow(context, data);
-            }}
-          />
-          <ActionButton
-            label="delete"
-            onClick={() => {
-              const { data } = userPattern.delete(viewingPatternID);
-              updateCodeWindow(context, { ...data, collection: userPattern.collection });
-            }}
-          />
-          <label className="hover:opacity-50 cursor-pointer">
-            <input
-              style={{ display: 'none' }}
-              type="file"
-              multiple
-              accept="text/plain,text/x-markdown,application/json"
-              onChange={(e) => importPatterns(e.target.files)}
-            />
-            import
-          </label>
-          <ActionButton label="export" onClick={exportPatterns} />
 
-          <ActionButton
-            label="delete-all"
-            onClick={() => {
-              const { data } = userPattern.clearAll();
-              updateCodeWindow(context, data);
-            }}
-          />
-        </div>
+      <div className="overflow-auto">
+        {/* bg-background */}
+        {/* {patternFilter === patternFilterName.user && ( */}
+        <PatternButtons
+          onClick={(id) => {
+            updateCodeWindow(context, { ...userPatterns[id], collection: userPattern.collection }, patternAutoStart);
 
-        <div className="overflow-auto h-full bg-background p-2 rounded-md">
-          {/* {patternFilter === patternFilterName.user && ( */}
-          <PatternButtons
-            onClick={(id) => {
-              updateCodeWindow(context, { ...userPatterns[id], collection: userPattern.collection }, patternAutoStart);
-
-              if (context.started && activePattern === id) {
-                context.handleEvaluate();
-              }
-            }}
-            patterns={visiblePatterns}
-            started={context.started}
-            activePattern={activePattern}
-            viewingPatternID={viewingPatternID}
-          />
-          {/* )} */}
-        </div>
+            if (context.started && activePattern === id) {
+              context.handleEvaluate();
+            }
+          }}
+          patterns={visiblePatterns}
+          started={context.started}
+          activePattern={activePattern}
+          viewingPatternID={viewingPatternID}
+        />
+        {/* )} */}
       </div>
     </div>
   );
diff --git a/website/src/repl/components/panel/Reference.jsx b/website/src/repl/components/panel/Reference.jsx
index f8132066a..5335a77e8 100644
--- a/website/src/repl/components/panel/Reference.jsx
+++ b/website/src/repl/components/panel/Reference.jsx
@@ -1,9 +1,14 @@
 import { memo, useEffect, useMemo, useState, Fragment } from 'react';
 
 import jsdocJson from '../../../../../doc.json';
-import { Textbox } from '../textbox/Textbox';
+import { Textbox } from '@src/repl/components/panel/SettingsTab';
+import { settingsMap, useSettings } from '@src/settings.mjs';
 
-const isValid = ({ name, description }) => name && !name.startsWith('_') && !!description;
+const isValid = ({ name, description, tags = [] }) => {
+  const isSupradoughOnly = tags.includes('supradough') && !tags.includes('superdough');
+  const isSuperdirtOnly = tags.includes('superdirt') && !tags.includes('superdough');
+  return name && !name.startsWith('_') && !!description && !isSupradoughOnly && !isSuperdirtOnly;
+};
 
 const availableFunctions = (() => {
   const seen = new Set(); // avoid repetition
@@ -13,30 +18,39 @@ const availableFunctions = (() => {
     if (seen.has(doc.name)) continue;
 
     // jsdoc also uses "tags" for when you use @something in the comments and it doesn't know what
-    // @something is. We only want data from comments like `@tags fx, superdough` here.
+    // @something is. We only want data from comments like `@tags superdough` here.
     // If nothing is specified, we default to "untagged" for debugging
     doc.tags = doc.tags?.filter((t) => t && typeof t === 'string') || ['untagged'];
-    functions.push(doc);
 
     const synonyms = doc.synonyms || [];
+    let names = [doc.name];
     seen.add(doc.name);
     for (const s of synonyms) {
       if (!s || seen.has(s)) continue;
+      names.push(s);
       seen.add(s);
-      // Swap `doc.name` in for `s` in the list of synonyms
-      const synonymsWithDoc = [doc.name, ...synonyms].filter((x) => x && x !== s);
-      functions.push({
-        ...doc,
-        name: s, // update names for the synonym
-        longname: s,
-        synonyms: synonymsWithDoc,
-        synonyms_text: synonymsWithDoc.join(', '),
-      });
     }
+    doc.allNames = names.join(' ');
+    doc.synonyms = names.slice(1);
+    functions.push(doc);
   }
   return functions.sort((a, b) => /* a.meta.filename.localeCompare(b.meta.filename) +  */ a.name.localeCompare(b.name));
 })();
 
+const tagCounts = {};
+const ignoredTags = ['supradough', 'superdirt'];
+// const tagOptions = { all: `all (${availableFunctions.length})` };
+const tagOptions = { all: `all` };
+for (const doc of availableFunctions) {
+  (doc.tags || ['untagged']).forEach((t) => {
+    if (typeof t === 'string' && t && !ignoredTags.includes(t)) {
+      tagCounts[t] = (tagCounts[t] || 0) + 1;
+      //tagOptions[t] = `${t} (${tagCounts[t]})`;
+      tagOptions[t] = t;
+    }
+  });
+}
+
 const getInnerText = (html) => {
   var div = document.createElement('div');
   div.innerHTML = html;
@@ -45,40 +59,38 @@ const getInnerText = (html) => {
 
 export const Reference = memo(function Reference() {
   const [search, setSearch] = useState('');
-  const [selectedTag, setSelectedTag] = useState(null);
   const [selectedFunction, setSelectedFunction] = useState(null);
+  const { referenceTag } = useSettings();
 
   const toggleTag = (tag) => {
-    if (selectedTag === tag) {
-      setSelectedTag(null);
+    if (referenceTag === tag) {
+      setReferenceTag('all');
     } else {
-      setSelectedTag(tag);
+      setReferenceTag(tag);
     }
   };
 
   const searchVisibleFunctions = useMemo(() => {
     return availableFunctions.filter((entry) => {
-      if (selectedTag) {
-        if (!(entry.tags || ['untagged']).includes(selectedTag)) {
+      if (referenceTag && referenceTag !== 'all') {
+        if (!(entry.tags || ['untagged']).includes(referenceTag)) {
           return false;
         }
       }
-
       if (!search) {
         return true;
       }
-
       const lowerCaseSearch = search.toLowerCase();
       return (
-        entry.name.toLowerCase().includes(lowerCaseSearch) ||
+        (entry.allNames || entry.name).toLowerCase().includes(lowerCaseSearch) ||
         (entry.synonyms?.some((s) => s.toLowerCase().includes(lowerCaseSearch)) ?? false)
       );
     });
-  }, [search, selectedTag]);
+  }, [search, referenceTag]);
 
   const detailVisibleFunctions = useMemo(() => {
     return searchVisibleFunctions.filter((x) => {
-      if (selectedTag === null) {
+      if (referenceTag === null || referenceTag === 'all') {
         if (search) {
           return true;
         }
@@ -87,19 +99,10 @@ export const Reference = memo(function Reference() {
         return true;
       }
     });
-  }, [searchVisibleFunctions, selectedFunction, selectedTag]);
-
-  const tagCounts = {};
-  for (const doc of availableFunctions) {
-    (doc.tags || ['untagged']).forEach((t) => {
-      if (typeof t === 'string' && t) {
-        tagCounts[t] = (tagCounts[t] || 0) + 1;
-      }
-    });
-  }
+  }, [searchVisibleFunctions, selectedFunction, referenceTag]);
 
   const onSearchTagFilterClick = () => {
-    setSelectedTag(null);
+    setReferenceTag('all');
     setSelectedFunction(null);
   };
 
@@ -111,36 +114,44 @@ export const Reference = memo(function Reference() {
     }
   }, [selectedFunction]);
 
+  let setReferenceTag = (value) => settingsMap.setKey('referenceTag', value);
+
   return (
-    <div className="flex h-full w-full p-2 overflow-hidden">
-      <div className="h-full text-foreground flex flex-col gap-3 w-1/3 ">
+    <div className="flex h-full w-full overflow-hidden">
+      <div className="h-full text-foreground flex flex-col w-1/3  border-r border-muted">
+        {/* bg-background */}
         <div className="w-full flex">
           <Textbox
-            className="w-full"
-            placeholder="Search"
+            className="w-full border-0 border-b border-muted"
+            placeholder="Search..."
             value={search}
             onChange={(e) => {
               setSelectedFunction(null);
+              setReferenceTag('all');
               setSearch(e);
             }}
           />
         </div>
-        {selectedTag && (
+
+        {/* <div className="flex shrink-0 flex-wrap w-full overflow-auto border-y border-muted">
+          <ButtonGroup wrap value={referenceTag} onChange={setReferenceTag} items={tagOptions}></ButtonGroup>
+        </div> */}
+        {referenceTag && referenceTag !== 'all' && (
           <div className="w-72">
             <span
-              className="text-foreground border-2 border-gray-500 px-1 py-0.5 my-2 rounded-md cursor-pointer font-sans"
+              className="text-foreground border border-muted border-t-0 border-l-0 px-1 py-0.5 my-2 cursor-pointer font-sans"
               onClick={onSearchTagFilterClick}
             >
-              {selectedTag}
+              {referenceTag}
             </span>
           </div>
         )}
-        <div className="flex flex-col h-full overflow-y-auto gap-1.5 bg-background bg-opacity-50 rounded-md">
+        <div className="h-full p-2 overflow-y-auto bg-opacity-50">
           {searchVisibleFunctions.map((entry, i) => (
             <Fragment key={`entry-${entry.name}`}>
               <a
                 className={
-                  'cursor-pointer flex-none hover:bg-lineHighlight overflow-x-hidden px-1 text-ellipsis ' +
+                  'whitespace-nowrap cursor-pointer hover:opacity-50 text-ellipsis block' +
                   (entry.name === selectedFunction ? 'bg-lineHighlight font-bold' : '')
                 }
                 onClick={() => {
@@ -151,31 +162,32 @@ export const Reference = memo(function Reference() {
                   }
                 }}
               >
-                {entry.name}
+                {entry.name} {entry.synonyms && <small className="opacity-50">{entry.synonyms?.join(', ')}</small>}
               </a>{' '}
             </Fragment>
           ))}
         </div>
       </div>
       <div
-        className="break-normal flex-col overflow-y-auto overflow-x-hidden p-2 flex relative"
+        className="w-2/3 break-normal flex-col overflow-y-auto overflow-x-hidden p-2 flex relative"
         id="reference-container"
       >
-        <div className="prose dark:prose-invert min-w-full px-1 ">
+        <div className="prose dark:prose-invert min-w-full px-1 text-sm">
           <h2>API Reference</h2>
           <p className="font-sans text-md">
             This is the long list of functions you can use. Remember that you don't need to remember all of those and
             that you can already make music with a small set of functions!
           </p>
           <div>
+            {/* <ButtonGroup wrap value={referenceTag} onChange={setReferenceTag} items={tagOptions}/>*/}
             {Object.entries(tagCounts)
               .sort(([a], [b]) => a.localeCompare(b))
               .map(([t, count]) => (
                 <span key={t}>
                   <a
                     className={[
-                      'select-none text-white border-2 border-gray-500 px-1 py-0.5 my-2 cursor-pointer text-sm/8 rounded-md no-underline font-sans',
-                      `${selectedTag === t ? 'bg-gray-500 text-black' : ''}`,
+                      'select-none text-white border border-muted px-1 py-0.5 my-2 cursor-pointer text-sm/8 no-underline font-sans',
+                      `${referenceTag === t ? 'bg-muted text-foreground' : ''}`,
                     ].join(' ')}
                     onClick={() => toggleTag(t)}
                   >
@@ -187,12 +199,12 @@ export const Reference = memo(function Reference() {
           {detailVisibleFunctions.map((entry, i) => (
             <section key={i} className="font-sans">
               <div className="flex flex-row items-center mt-8 justify-between">
-                <h3 className="font-mono my-0" id={`doc-${entry.name}`}>
+                <h3 className="font-mono my-0 pt-4" id={`doc-${entry.name}`}>
                   {entry.name}
                 </h3>
                 {entry.tags && (
-                  <span className="ml-2 text-xs text-gray-400 border-2 border-gray-500 rounded-md px-1 py-0.5">
-                    {entry.tags.join(', ')}
+                  <span className="ml-2 text-xs text-foreground border border-muted px-1 py-0.5">
+                    {entry.tags.filter((t) => !ignoredTags.includes(t)).join(', ')}
                   </span>
                 )}
               </div>
@@ -201,7 +213,7 @@ export const Reference = memo(function Reference() {
                   Synonyms: <code>{entry.synonyms_text}</code>
                 </p>
               )}
-              {/* <small>{entry.meta.filename}</small> */}
+
               <p dangerouslySetInnerHTML={{ __html: entry.description }}></p>
               <ul>
                 {entry.params?.map(({ name, type, description }, i) => (
@@ -211,12 +223,12 @@ export const Reference = memo(function Reference() {
                 ))}
               </ul>
               {entry.examples?.map((example, j) => (
-                <pre className="bg-background" key={j}>
+                <pre className="bg-background border border-muted" key={j}>
                   {example}
                 </pre>
               ))}
             </section>
-          )) || <p className="font-sans">Searcb or select a tag to get started.</p>}
+          )) || <p className="font-sans">Search or select a tag to get started.</p>}
           {detailVisibleFunctions.length > 0 && <div className="h-screen" />}
         </div>
       </div>
diff --git a/website/src/repl/components/panel/SelectInput.jsx b/website/src/repl/components/panel/SelectInput.jsx
deleted file mode 100644
index b47809671..000000000
--- a/website/src/repl/components/panel/SelectInput.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-//      value: ?ID, options: Map<ID, any>, onChange: ID => null, onClick: event => void, isDisabled: boolean
-export function SelectInput({ value, options, onChange, onClick, isDisabled }) {
-  return (
-    <select
-      disabled={isDisabled}
-      onClick={onClick}
-      className="p-2 bg-background rounded-md text-foreground  border-foreground"
-      value={value ?? ''}
-      onChange={(e) => onChange(e.target.value)}
-    >
-      {options.size == 0 && <option value={value}>{`${value ?? 'select an option'}`}</option>}
-      {Array.from(options.keys()).map((id) => (
-        <option key={id} className="bg-background" value={id}>
-          {options.get(id)}
-        </option>
-      ))}
-    </select>
-  );
-}
diff --git a/website/src/repl/components/panel/SettingsTab.jsx b/website/src/repl/components/panel/SettingsTab.jsx
index 0b87852bb..62d310108 100644
--- a/website/src/repl/components/panel/SettingsTab.jsx
+++ b/website/src/repl/components/panel/SettingsTab.jsx
@@ -1,6 +1,5 @@
 import { defaultSettings, settingsMap, useSettings } from '../../../settings.mjs';
 import { themes } from '@strudel/codemirror';
-import { Textbox } from '../textbox/Textbox.jsx';
 import { confirmAndReloadPage, isUdels } from '../../util.mjs';
 import { ButtonGroup } from './Forms.jsx';
 import { AudioDeviceSelector } from './AudioDeviceSelector.jsx';
@@ -10,22 +9,60 @@ import { DEFAULT_MAX_POLYPHONY, setMaxPolyphony, setMultiChannelOrbits } from '@
 import { SpecialActionButton } from '../button/action-button.jsx';
 import { ImportPrebakeScriptButton } from './ImportPrebakeScriptButton.jsx';
 
+function cx(...classes) {
+  // : Array<string | undefined>
+  return classes.filter(Boolean).join(' ');
+}
+
+const inputClass =
+  'bg-background text-xs h-8 max-h-8 border border-box rounded-0 text-foreground border-muted placeholder-muted focus:outline-none focus:ring-0 focus:border-foreground';
+
+export function Textbox({ onChange, className, ...inputProps }) {
+  return (
+    <input className={cx('px-2', inputClass, className)} onChange={(e) => onChange(e.target.value)} {...inputProps} />
+  );
+}
+
 function Checkbox({ label, value, onChange, disabled = false }) {
   return (
-    <label>
-      <input disabled={disabled} type="checkbox" checked={value} onChange={onChange} />
+    <label className="text-xs">
+      <input
+        className={cx(
+          'bg-background text-sm border border-muted focus:outline-none focus:ring-0 focus:border-foreground',
+        )}
+        disabled={disabled}
+        type="checkbox"
+        checked={value}
+        onChange={onChange}
+      />
       {' ' + label}
     </label>
   );
 }
 
-function SelectInput({ value, options, onChange }) {
+//      value: ?ID, options: Map<ID, any>, onChange: ID => null, onClick: event => void, isDisabled: boolean
+export function SelectInputDuplicate({ value, options, onChange, onClick, isDisabled }) {
   return (
     <select
-      className="p-2 bg-background rounded-md text-foreground  border-foreground"
-      value={value}
+      disabled={isDisabled}
+      onClick={onClick}
+      className={cx('p-2', inputClass)}
+      value={value ?? ''}
       onChange={(e) => onChange(e.target.value)}
     >
+      {options.size == 0 && <option value={value}>{`${value ?? 'select an option'}`}</option>}
+      {Array.from(options.keys()).map((id) => (
+        <option key={id} className="bg-background" value={id}>
+          {options.get(id)}
+        </option>
+      ))}
+    </select>
+  );
+}
+
+function SelectInput({ value, options, onChange }) {
+  return (
+    <select className={cx('p-2', inputClass)} value={value} onChange={(e) => onChange(e.target.value)}>
       {Object.entries(options).map(([k, label]) => (
         <option key={k} className="bg-background" value={k}>
           {label}
@@ -37,9 +74,9 @@ function SelectInput({ value, options, onChange }) {
 
 function NumberSlider({ value, onChange, step = 1, ...rest }) {
   return (
-    <div className="flex space-x-2 gap-1">
+    <div className="flex space-x-2 gap-1 overflow-hidden">
       <input
-        className="p-2 grow"
+        className="p-2 grow accent-foreground"
         type="range"
         value={value}
         step={step}
@@ -50,7 +87,7 @@ function NumberSlider({ value, onChange, step = 1, ...rest }) {
         type="number"
         value={value}
         step={step}
-        className="w-16 bg-background rounded-md"
+        className={cx('w-16', inputClass)}
         onChange={(e) => onChange(Number(e.target.value))}
       />
     </div>
@@ -59,8 +96,8 @@ function NumberSlider({ value, onChange, step = 1, ...rest }) {
 
 function FormItem({ label, children, sublabel }) {
   return (
-    <div className="grid gap-2">
-      <label>{label}</label>
+    <div className="grid gap-2 text-xs">
+      <label className="text-sm">{label}</label>
       {children}
     </div>
   );
@@ -107,7 +144,6 @@ export function SettingsTab({ started }) {
     panelPosition,
     audioDeviceName,
     audioEngineTarget,
-    togglePanelTrigger,
     maxPolyphony,
     multiChannelOrbits,
     isTabIndentationEnabled,
@@ -119,7 +155,7 @@ export function SettingsTab({ started }) {
   const shouldAlwaysSync = isUdels();
   const canChangeAudioDevice = AudioContext.prototype.setSinkId != null;
   return (
-    <div className="text-foreground p-4 space-y-4 w-full" style={{ fontFamily }}>
+    <div className="p-4 text-foreground space-y-4 w-full" style={{ fontFamily }}>
       {canChangeAudioDevice && (
         <FormItem label="Audio Output Device">
           <AudioDeviceSelector
@@ -179,7 +215,7 @@ export function SettingsTab({ started }) {
       <FormItem label="Theme">
         <SelectInput options={themeOptions} value={theme} onChange={(theme) => settingsMap.setKey('theme', theme)} />
       </FormItem>
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 font-sans">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
         <FormItem label="Font Family">
           <SelectInput
             options={fontFamilyOptions}
@@ -220,13 +256,6 @@ export function SettingsTab({ started }) {
           items={{ bottom: 'Bottom', right: 'Right' }}
         ></ButtonGroup>
       </FormItem>
-      <FormItem label="Open Panel on:                       ">
-        <ButtonGroup
-          value={togglePanelTrigger}
-          onChange={(value) => settingsMap.setKey('togglePanelTrigger', value)}
-          items={{ click: 'Click', hover: 'Hover' }}
-        />
-      </FormItem>
       <FormItem label="More Settings">
         <Checkbox
           label="Enable bracket matching"
@@ -300,7 +329,7 @@ export function SettingsTab({ started }) {
           value={isSyncEnabled}
         />
         <Checkbox
-          label="Hide top buttons"
+          label="Hide action buttons"
           onChange={(cbEvent) => settingsMap.setKey('isButtonRowHidden', cbEvent.target.checked)}
           value={isButtonRowHidden}
         />
diff --git a/website/src/repl/components/panel/SoundsTab.jsx b/website/src/repl/components/panel/SoundsTab.jsx
index 5a7df5ba9..dcabce6f5 100644
--- a/website/src/repl/components/panel/SoundsTab.jsx
+++ b/website/src/repl/components/panel/SoundsTab.jsx
@@ -5,7 +5,7 @@ import { useMemo, useRef, useState } from 'react';
 import { settingsMap, soundFilterType, useSettings } from '../../../settings.mjs';
 import { ButtonGroup } from './Forms.jsx';
 import ImportSoundsButton from './ImportSoundsButton.jsx';
-import { Textbox } from '../textbox/Textbox.jsx';
+import { Textbox } from '@src/repl/components/panel/SettingsTab.jsx';
 import { ActionButton } from '../button/action-button.jsx';
 import { confirmDialog } from '@src/repl/util.mjs';
 import { clearIDB, userSamplesDBConfig } from '@src/repl/idbutils.mjs';
@@ -77,11 +77,12 @@ export function SoundsTab() {
     numRef.current = 0;
   });
   return (
-    <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 id="sounds-tab" className="flex flex-col w-full h-full text-foreground">
+      <Textbox placeholder="Search..." className="border-0" value={search} onChange={(v) => setSearch(v)} />
 
-      <div className=" flex shrink-0 flex-wrap">
+      <div className="flex shrink-0 flex-wrap border-y border-muted">
         <ButtonGroup
+          wrap
           value={soundsFilter}
           onChange={(value) => settingsMap.setKey('soundsFilter', value)}
           items={{
@@ -114,7 +115,7 @@ export function SoundsTab() {
         />
       )}
 
-      <div className="min-h-0 max-h-full grow overflow-auto  text-sm break-normal bg-background p-2 rounded-md">
+      <div className="min-h-0 max-h-full grow overflow-auto break-normal p-2">
         {soundEntries.map(([name, { data, onTrigger }]) => {
           return (
             <span
@@ -165,7 +166,7 @@ export function SoundsTab() {
           );
         })}
         {!soundEntries.length && soundsFilter === 'importSounds' ? (
-          <div className="prose dark:prose-invert min-w-full pt-2 pb-8 px-4">
+          <div className="prose dark:prose-invert min-w-full text-sm">
             <ImportSoundsButton onComplete={() => settingsMap.setKey('soundsFilter', 'user')} />
             <p>
               To import sounds into strudel, they must be contained{' '}
diff --git a/website/src/repl/components/panel/WelcomeTab.jsx b/website/src/repl/components/panel/WelcomeTab.jsx
index 7f0ee70ab..9d78edf85 100644
--- a/website/src/repl/components/panel/WelcomeTab.jsx
+++ b/website/src/repl/components/panel/WelcomeTab.jsx
@@ -6,8 +6,8 @@ const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL
 export function WelcomeTab({ context }) {
   const { fontFamily } = useSettings();
   return (
-    <div className="prose dark:prose-invert min-w-full pt-2 font-sans pb-8 px-4 " style={{ fontFamily }}>
-      <h3>꩜ welcome</h3>
+    <div className="prose dark:prose-invert min-w-full py-4 font-sans px-4 text-sm" style={{ fontFamily }}>
+      <h3>welcome</h3>
       <p>
         You have found <span className="underline">strudel</span>, a new live coding platform to write dynamic music
         pieces in the browser! It is free and open-source and made for beginners and experts alike. To get started:
@@ -30,7 +30,7 @@ export function WelcomeTab({ context }) {
         </a>{' '}
         to ask any questions, give feedback or just say hello.
       </p>
-      <h3>꩜ about</h3>
+      <h3>about</h3>
       <p>
         strudel is a JavaScript version of{' '}
         <a href="https://tidalcycles.org/" target="_blank">
diff --git a/website/src/repl/components/textbox/Textbox.jsx b/website/src/repl/components/textbox/Textbox.jsx
deleted file mode 100644
index 6c3bc3283..000000000
--- a/website/src/repl/components/textbox/Textbox.jsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import cx from '@src/cx.mjs';
-
-export function Textbox({ onChange, className, ...inputProps }) {
-  return (
-    <input
-      className={cx(
-        'p-2 bg-background rounded-md  border-foreground text-foreground placeholder-foreground',
-        className,
-      )}
-      onChange={(e) => onChange(e.target.value)}
-      {...inputProps}
-    />
-  );
-}
diff --git a/website/src/repl/components/useLogger.jsx b/website/src/repl/components/useLogger.jsx
index fdd56606d..4a87ac075 100644
--- a/website/src/repl/components/useLogger.jsx
+++ b/website/src/repl/components/useLogger.jsx
@@ -21,7 +21,7 @@ function getUpdatedLog(log, event) {
   } else {
     log = log.concat([{ message, type, id, data }]);
   }
-  return log.slice(-20);
+  return log.slice(-40);
 }
 
 export function useLogger() {
diff --git a/website/src/settings.mjs b/website/src/settings.mjs
index 9094cba9a..6acf8e2e2 100644
--- a/website/src/settings.mjs
+++ b/website/src/settings.mjs
@@ -2,6 +2,7 @@ import { persistentMap } from '@nanostores/persistent';
 import { useStore } from '@nanostores/react';
 import { register } from '@strudel/core';
 import { isUdels } from './repl/util.mjs';
+import { computed } from 'nanostores';
 
 export const audioEngineTargets = {
   webaudio: 'webaudio',
@@ -39,12 +40,12 @@ export const defaultSettings = {
   latestCode: '',
   isZen: false,
   soundsFilter: soundFilterType.ALL,
+  referenceTag: 'all',
   patternFilter: 'community',
   // panelPosition: window.innerWidth > 1000 ? 'right' : 'bottom', //FIX: does not work on astro
   panelPosition: 'right',
   isPanelPinned: false,
   isPanelOpen: true,
-  togglePanelTrigger: 'click', //click | hover
   userPatterns: '{}',
   prebakeScript: '',
   audioEngineTarget: audioEngineTargets.webaudio,
@@ -65,11 +66,7 @@ const settings_key = `strudel-settings${instance > 0 ? instance : ''}`;
 
 export const settingsMap = persistentMap(settings_key, defaultSettings);
 
-export const parseBoolean = (booleanlike) => ([true, 'true'].includes(booleanlike) ? true : false);
-
-export function useSettings() {
-  const state = useStore(settingsMap);
-
+export const $settings = computed(settingsMap, (state) => {
   const userPatterns = JSON.parse(state.userPatterns);
   Object.keys(userPatterns).forEach((key) => {
     const data = userPatterns[key];
@@ -107,6 +104,12 @@ export function useSettings() {
         ? true
         : parseBoolean(state.patternAutoStart),
   };
+});
+
+export const parseBoolean = (booleanlike) => ([true, 'true'].includes(booleanlike) ? true : false);
+
+export function useSettings() {
+  return useStore($settings);
 }
 
 export const setActiveFooter = (tab) => settingsMap.setKey('activeFooter', tab);
diff --git a/website/src/user_pattern_utils.mjs b/website/src/user_pattern_utils.mjs
index f087c69e0..8c452ee8d 100644
--- a/website/src/user_pattern_utils.mjs
+++ b/website/src/user_pattern_utils.mjs
@@ -1,4 +1,4 @@
-import { atom } from 'nanostores';
+import { atom, computed } from 'nanostores';
 import { useStore } from '@nanostores/react';
 import { logger } from '@strudel/core';
 import { nanoid } from 'nanoid';
@@ -36,12 +36,9 @@ export let $viewingPatternData = sessionAtom('viewingPatternData', {
   created_at: Date.now(),
 });
 
-export const getViewingPatternData = () => {
-  return parseJSON($viewingPatternData.get());
-};
-export const useViewingPatternData = () => {
-  return useStore($viewingPatternData);
-};
+const $viewingPatterns = computed($viewingPatternData, (state) => parseJSON(state));
+export const useViewingPatternData = () => useStore($viewingPatterns);
+export const getViewingPatternData = () => $viewingPatterns.get();
 
 export const setViewingPatternData = (data) => {
   $viewingPatternData.set(JSON.stringify(data));
diff --git a/website/tailwind.config.cjs b/website/tailwind.config.cjs
index 2b840995c..0b523747d 100644
--- a/website/tailwind.config.cjs
+++ b/website/tailwind.config.cjs
@@ -24,6 +24,7 @@ module.exports = {
         background: 'var(--background)',
         lineBackground: 'var(--lineBackground)',
         foreground: 'var(--foreground)',
+        muted: 'var(--muted)',
         caret: 'var(--caret)',
         selection: 'var(--selection)',
         selectionMatch: 'var(--selectionMatch)',
@@ -46,28 +47,28 @@ module.exports = {
               'code::after': {
                 content: 'none',
               },
-              color: 'var(--foreground)',
+              color: 'var(--foreground) !important',
               a: {
-                color: 'var(--foreground)',
+                color: 'var(--foreground) !important',
               },
               h1: {
-                color: 'var(--foreground)',
+                color: 'var(--foreground) !important',
               },
               h2: {
-                color: 'var(--foreground)',
+                color: 'var(--foreground) !important',
               },
               h3: {
-                color: 'var(--foreground)',
+                color: 'var(--foreground) !important',
               },
               h4: {
-                color: 'var(--foreground)',
+                color: 'var(--foreground) !important',
               },
               pre: {
-                color: 'var(--foreground)',
-                background: 'var(--background)',
+                color: 'var(--foreground) !important',
+                background: 'var(--background) !important',
               },
               code: {
-                color: 'var(--foreground)',
+                color: 'var(--foreground) !important',
               },
             },
           },