From 5be1004292832f5f0f51b053a1a9f0e5c86941c9 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Sat, 19 Aug 2023 00:19:32 +0200
Subject: [PATCH 01/72] encapsulate panel tabs

---
 website/src/repl/Footer.jsx                | 381 +--------------------
 website/src/repl/panel/ConsoleTab.jsx      |  45 +++
 website/src/repl/{ => panel}/FilesTab.jsx  |   2 +-
 website/src/repl/panel/Forms.jsx           |  24 ++
 website/src/repl/{ => panel}/Reference.jsx |   2 +-
 website/src/repl/panel/SettingsTab.jsx     | 173 ++++++++++
 website/src/repl/panel/SoundsTab.jsx       |  89 +++++
 website/src/repl/panel/WelcomeTab.jsx      |  49 +++
 8 files changed, 391 insertions(+), 374 deletions(-)
 create mode 100644 website/src/repl/panel/ConsoleTab.jsx
 rename website/src/repl/{ => panel}/FilesTab.jsx (97%)
 create mode 100644 website/src/repl/panel/Forms.jsx
 rename website/src/repl/{ => panel}/Reference.jsx (97%)
 create mode 100644 website/src/repl/panel/SettingsTab.jsx
 create mode 100644 website/src/repl/panel/SoundsTab.jsx
 create mode 100644 website/src/repl/panel/WelcomeTab.jsx

diff --git a/website/src/repl/Footer.jsx b/website/src/repl/Footer.jsx
index 77a3efbc..b27f11c0 100644
--- a/website/src/repl/Footer.jsx
+++ b/website/src/repl/Footer.jsx
@@ -1,15 +1,15 @@
 import XMarkIcon from '@heroicons/react/20/solid/XMarkIcon';
 import { logger } from '@strudel.cycles/core';
-import { useEvent, cx } from '@strudel.cycles/react';
-// import { cx } from '@strudel.cycles/react';
+import { cx, useEvent } from '@strudel.cycles/react';
 import { nanoid } from 'nanoid';
-import React, { useMemo, useCallback, useLayoutEffect, useRef, useState } from 'react';
-import { Reference } from './Reference';
-import { themes } from './themes.mjs';
-import { useSettings, settingsMap, setActiveFooter, defaultSettings } from '../settings.mjs';
-import { getAudioContext, soundMap } from '@strudel.cycles/webaudio';
-import { useStore } from '@nanostores/react';
-import { FilesTab } from './FilesTab';
+import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import { setActiveFooter, useSettings } from '../settings.mjs';
+import { ConsoleTab } from './panel/ConsoleTab';
+import { FilesTab } from './panel/FilesTab';
+import { Reference } from './panel/Reference';
+import { SettingsTab } from './panel/SettingsTab';
+import { SoundsTab } from './panel/SoundsTab';
+import { WelcomeTab } from './panel/WelcomeTab';
 
 const TAURI = window.__TAURI__;
 
@@ -114,366 +114,3 @@ export function Footer({ context }) {
 function useLogger(onTrigger) {
   useEvent(logger.key, onTrigger);
 }
-
-function linkify(inputText) {
-  var replacedText, replacePattern1, replacePattern2, replacePattern3;
-
-  //URLs starting with http://, https://, or ftp://
-  replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
-  replacedText = inputText.replace(replacePattern1, '<a class="underline" href="$1" target="_blank">$1</a>');
-
-  //URLs starting with "www." (without // before it, or it'd re-link the ones done above).
-  replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
-  replacedText = replacedText.replace(
-    replacePattern2,
-    '$1<a class="underline" href="http://$2" target="_blank">$2</a>',
-  );
-
-  //Change email addresses to mailto:: links.
-  replacePattern3 = /(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim;
-  replacedText = replacedText.replace(replacePattern3, '<a class="underline" href="mailto:$1">$1</a>');
-
-  return replacedText;
-}
-
-function WelcomeTab() {
-  return (
-    <div className="prose dark:prose-invert max-w-[600px] pt-2 font-sans pb-8 px-4">
-      <h3>
-        <span className={cx('animate-spin inline-block select-none')}>🌀</span> 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:
-        <br />
-        <br />
-        <span className="underline">1. hit play</span> - <span className="underline">2. change something</span> -{' '}
-        <span className="underline">3. hit update</span>
-        <br />
-        If you don't like what you hear, try <span className="underline">shuffle</span>!
-      </p>
-      <p>
-        To learn more about what this all means, check out the{' '}
-        <a href="./workshop/getting-started" target="_blank">
-          interactive tutorial
-        </a>
-        . Also feel free to join the{' '}
-        <a href="https://discord.com/invite/HGEdXmRkzT" target="_blank">
-          tidalcycles discord channel
-        </a>{' '}
-        to ask any questions, give feedback or just say hello.
-      </p>
-      <h3>about</h3>
-      <p>
-        strudel is a JavaScript version of{' '}
-        <a href="https://tidalcycles.org/" target="_blank">
-          tidalcycles
-        </a>
-        , which is a popular live coding language for music, written in Haskell. You can find the source code at{' '}
-        <a href="https://github.com/tidalcycles/strudel" target="_blank">
-          github
-        </a>
-        . Please consider to{' '}
-        <a href="https://opencollective.com/tidalcycles" target="_blank">
-          support this project
-        </a>{' '}
-        to ensure ongoing development 💖
-      </p>
-    </div>
-  );
-}
-
-function ConsoleTab({ log }) {
-  return (
-    <div id="console-tab" className="break-all px-4 dark:text-white text-stone-900 text-sm">
-      <pre>{`███████╗████████╗██████╗ ██╗   ██╗██████╗ ███████╗██╗     
-██╔════╝╚══██╔══╝██╔══██╗██║   ██║██╔══██╗██╔════╝██║     
-███████╗   ██║   ██████╔╝██║   ██║██║  ██║█████╗  ██║     
-╚════██║   ██║   ██╔══██╗██║   ██║██║  ██║██╔══╝  ██║     
-███████║   ██║   ██║  ██║╚██████╔╝██████╔╝███████╗███████╗
-╚══════╝   ╚═╝   ╚═╝  ╚═╝ ╚═════╝ ╚═════╝ ╚══════╝╚══════╝`}</pre>
-      {log.map((l, i) => {
-        const message = linkify(l.message);
-        return (
-          <div key={l.id} className={cx(l.type === 'error' && 'text-red-500', l.type === 'highlight' && 'underline')}>
-            <span dangerouslySetInnerHTML={{ __html: message }} />
-            {l.count ? ` (${l.count})` : ''}
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-const getSamples = (samples) =>
-  Array.isArray(samples) ? samples.length : typeof samples === 'object' ? Object.values(samples).length : 1;
-
-function SoundsTab() {
-  const sounds = useStore(soundMap);
-  const { soundsFilter } = useSettings();
-  const soundEntries = useMemo(() => {
-    let filtered = Object.entries(sounds).filter(([key]) => !key.startsWith('_'));
-    if (!sounds) {
-      return [];
-    }
-    if (soundsFilter === 'user') {
-      return filtered.filter(([key, { data }]) => !data.prebake);
-    }
-    if (soundsFilter === 'drums') {
-      return filtered.filter(([_, { data }]) => data.type === 'sample' && data.tag === 'drum-machines');
-    }
-    if (soundsFilter === 'samples') {
-      return filtered.filter(([_, { data }]) => data.type === 'sample' && data.tag !== 'drum-machines');
-    }
-    if (soundsFilter === 'synths') {
-      return filtered.filter(([_, { data }]) => ['synth', 'soundfont'].includes(data.type));
-    }
-    return filtered;
-  }, [sounds, soundsFilter]);
-  // holds mutable ref to current triggered sound
-  const trigRef = useRef();
-  // stop current sound on mouseup
-  useEvent('mouseup', () => {
-    const t = trigRef.current;
-    trigRef.current = undefined;
-    t?.then((ref) => {
-      ref?.stop(getAudioContext().currentTime + 0.01);
-    });
-  });
-  return (
-    <div id="sounds-tab" className="flex flex-col w-full h-full dark:text-white text-stone-900">
-      <div className="px-2 pb-2 flex-none">
-        <ButtonGroup
-          value={soundsFilter}
-          onChange={(value) => settingsMap.setKey('soundsFilter', value)}
-          items={{
-            samples: 'samples',
-            drums: 'drum-machines',
-            synths: 'Synths',
-            user: 'User',
-          }}
-        ></ButtonGroup>
-      </div>
-      <div className="p-2 min-h-0 max-h-full grow overflow-auto font-mono text-sm break-normal">
-        {soundEntries.map(([name, { data, onTrigger }]) => (
-          <span
-            key={name}
-            className="cursor-pointer hover:opacity-50"
-            onMouseDown={async () => {
-              const ctx = getAudioContext();
-              const params = {
-                note: ['synth', 'soundfont'].includes(data.type) ? 'a3' : undefined,
-                s: name,
-                clip: 1,
-                release: 0.5,
-              };
-              const time = ctx.currentTime + 0.05;
-              const onended = () => trigRef.current?.node?.disconnect();
-              trigRef.current = Promise.resolve(onTrigger(time, params, onended));
-              trigRef.current.then((ref) => {
-                ref?.node.connect(ctx.destination);
-              });
-            }}
-          >
-            {' '}
-            {name}
-            {data?.type === 'sample' ? `(${getSamples(data.samples)})` : ''}
-            {data?.type === 'soundfont' ? `(${data.fonts.length})` : ''}
-          </span>
-        ))}
-        {!soundEntries.length ? 'No custom sounds loaded in this pattern (yet).' : ''}
-      </div>
-    </div>
-  );
-}
-
-function Checkbox({ label, value, onChange }) {
-  return (
-    <label>
-      <input type="checkbox" checked={value} onChange={onChange} />
-      {' ' + label}
-    </label>
-  );
-}
-
-function ButtonGroup({ value, onChange, items }) {
-  return (
-    <div className="flex max-w-lg">
-      {Object.entries(items).map(([key, label], i, arr) => (
-        <button
-          key={key}
-          onClick={() => onChange(key)}
-          className={cx(
-            'px-2 border-b h-8',
-            // i === 0 && 'rounded-l-md',
-            // i === arr.length - 1 && 'rounded-r-md',
-            // value === key ? 'bg-background' : 'bg-lineHighlight',
-            value === key ? 'border-foreground' : 'border-transparent',
-          )}
-        >
-          {label.toLowerCase()}
-        </button>
-      ))}
-    </div>
-  );
-}
-
-function SelectInput({ value, options, onChange }) {
-  return (
-    <select
-      className="p-2 bg-background rounded-md text-foreground"
-      value={value}
-      onChange={(e) => onChange(e.target.value)}
-    >
-      {Object.entries(options).map(([k, label]) => (
-        <option key={k} className="bg-background" value={k}>
-          {label}
-        </option>
-      ))}
-    </select>
-  );
-}
-
-function NumberSlider({ value, onChange, step = 1, ...rest }) {
-  return (
-    <div className="flex space-x-2 gap-1">
-      <input
-        className="p-2 grow"
-        type="range"
-        value={value}
-        step={step}
-        onChange={(e) => onChange(Number(e.target.value))}
-        {...rest}
-      />
-      <input
-        type="number"
-        value={value}
-        step={step}
-        className="w-16 bg-background rounded-md"
-        onChange={(e) => onChange(Number(e.target.value))}
-      />
-    </div>
-  );
-}
-
-function FormItem({ label, children }) {
-  return (
-    <div className="grid gap-2">
-      <label>{label}</label>
-      {children}
-    </div>
-  );
-}
-
-const themeOptions = Object.fromEntries(Object.keys(themes).map((k) => [k, k]));
-const fontFamilyOptions = {
-  monospace: 'monospace',
-  BigBlueTerminal: 'BigBlueTerminal',
-  x3270: 'x3270',
-  PressStart: 'PressStart2P',
-  galactico: 'galactico',
-  'we-come-in-peace': 'we-come-in-peace',
-  FiraCode: 'FiraCode',
-  'FiraCode-SemiBold': 'FiraCode SemiBold',
-};
-
-function SettingsTab({ scheduler }) {
-  const {
-    theme,
-    keybindings,
-    isLineNumbersDisplayed,
-    isAutoCompletionEnabled,
-    isLineWrappingEnabled,
-    fontSize,
-    fontFamily,
-    panelPosition,
-  } = useSettings();
-
-  return (
-    <div className="text-foreground p-4 space-y-4">
-      {/* <FormItem label="Tempo">
-        <div className="space-x-4">
-          <button
-            onClick={() => {
-              scheduler.setCps(scheduler.cps - 0.1);
-            }}
-          >
-            slower
-          </button>
-          <button
-            onClick={() => {
-              scheduler.setCps(scheduler.cps + 0.1);
-            }}
-          >
-            faster
-          </button>
-        </div>
-      </FormItem> */}
-      <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">
-        <FormItem label="Font Family">
-          <SelectInput
-            options={fontFamilyOptions}
-            value={fontFamily}
-            onChange={(fontFamily) => settingsMap.setKey('fontFamily', fontFamily)}
-          />
-        </FormItem>
-        <FormItem label="Font Size">
-          <NumberSlider
-            value={fontSize}
-            onChange={(fontSize) => settingsMap.setKey('fontSize', fontSize)}
-            min={10}
-            max={40}
-            step={2}
-          />
-        </FormItem>
-      </div>
-      <FormItem label="Keybindings">
-        <ButtonGroup
-          value={keybindings}
-          onChange={(keybindings) => settingsMap.setKey('keybindings', keybindings)}
-          items={{ codemirror: 'Codemirror', vim: 'Vim', emacs: 'Emacs' }}
-        ></ButtonGroup>
-      </FormItem>
-      <FormItem label="Panel Position">
-        <ButtonGroup
-          value={panelPosition}
-          onChange={(value) => settingsMap.setKey('panelPosition', value)}
-          items={{ bottom: 'Bottom', right: 'Right' }}
-        ></ButtonGroup>
-      </FormItem>
-      <FormItem label="Code Settings">
-        <Checkbox
-          label="Display line numbers"
-          onChange={(cbEvent) => settingsMap.setKey('isLineNumbersDisplayed', cbEvent.target.checked)}
-          value={isLineNumbersDisplayed}
-        />
-        <Checkbox
-          label="Enable auto-completion"
-          onChange={(cbEvent) => settingsMap.setKey('isAutoCompletionEnabled', cbEvent.target.checked)}
-          value={isAutoCompletionEnabled}
-        />
-        <Checkbox
-          label="Enable line wrapping"
-          onChange={(cbEvent) => settingsMap.setKey('isLineWrappingEnabled', cbEvent.target.checked)}
-          value={isLineWrappingEnabled}
-        />
-      </FormItem>
-      <FormItem label="Zen Mode">Try clicking the logo in the top left!</FormItem>
-      <FormItem label="Reset Settings">
-        <button
-          className="bg-background p-2 max-w-[300px] rounded-md hover:opacity-50"
-          onClick={() => {
-            if (confirm('Sure?')) {
-              settingsMap.set(defaultSettings);
-            }
-          }}
-        >
-          restore default settings
-        </button>
-      </FormItem>
-    </div>
-  );
-}
diff --git a/website/src/repl/panel/ConsoleTab.jsx b/website/src/repl/panel/ConsoleTab.jsx
new file mode 100644
index 00000000..4472fd4c
--- /dev/null
+++ b/website/src/repl/panel/ConsoleTab.jsx
@@ -0,0 +1,45 @@
+import { cx } from '@strudel.cycles/react';
+import React from 'react';
+
+export function ConsoleTab({ log }) {
+  return (
+    <div id="console-tab" className="break-all px-4 dark:text-white text-stone-900 text-sm">
+      <pre>{`███████╗████████╗██████╗ ██╗   ██╗██████╗ ███████╗██╗     
+██╔════╝╚══██╔══╝██╔══██╗██║   ██║██╔══██╗██╔════╝██║     
+███████╗   ██║   ██████╔╝██║   ██║██║  ██║█████╗  ██║     
+╚════██║   ██║   ██╔══██╗██║   ██║██║  ██║██╔══╝  ██║     
+███████║   ██║   ██║  ██║╚██████╔╝██████╔╝███████╗███████╗
+╚══════╝   ╚═╝   ╚═╝  ╚═╝ ╚═════╝ ╚═════╝ ╚══════╝╚══════╝`}</pre>
+      {log.map((l, i) => {
+        const message = linkify(l.message);
+        return (
+          <div key={l.id} className={cx(l.type === 'error' && 'text-red-500', l.type === 'highlight' && 'underline')}>
+            <span dangerouslySetInnerHTML={{ __html: message }} />
+            {l.count ? ` (${l.count})` : ''}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function linkify(inputText) {
+  var replacedText, replacePattern1, replacePattern2, replacePattern3;
+
+  //URLs starting with http://, https://, or ftp://
+  replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
+  replacedText = inputText.replace(replacePattern1, '<a class="underline" href="$1" target="_blank">$1</a>');
+
+  //URLs starting with "www." (without // before it, or it'd re-link the ones done above).
+  replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
+  replacedText = replacedText.replace(
+    replacePattern2,
+    '$1<a class="underline" href="http://$2" target="_blank">$2</a>',
+  );
+
+  //Change email addresses to mailto:: links.
+  replacePattern3 = /(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim;
+  replacedText = replacedText.replace(replacePattern3, '<a class="underline" href="mailto:$1">$1</a>');
+
+  return replacedText;
+}
diff --git a/website/src/repl/FilesTab.jsx b/website/src/repl/panel/FilesTab.jsx
similarity index 97%
rename from website/src/repl/FilesTab.jsx
rename to website/src/repl/panel/FilesTab.jsx
index e04086b6..d78ec1ec 100644
--- a/website/src/repl/FilesTab.jsx
+++ b/website/src/repl/panel/FilesTab.jsx
@@ -1,6 +1,6 @@
 import { Fragment, useEffect } from 'react';
 import React, { useMemo, useState } from 'react';
-import { isAudioFile, readDir, dir, playFile } from './files.mjs';
+import { isAudioFile, readDir, dir, playFile } from '../files.mjs';
 
 export function FilesTab() {
   const [path, setPath] = useState([]);
diff --git a/website/src/repl/panel/Forms.jsx b/website/src/repl/panel/Forms.jsx
new file mode 100644
index 00000000..e45305e5
--- /dev/null
+++ b/website/src/repl/panel/Forms.jsx
@@ -0,0 +1,24 @@
+import { cx } from '@strudel.cycles/react';
+import React from 'react';
+
+export function ButtonGroup({ value, onChange, items }) {
+  return (
+    <div className="flex max-w-lg">
+      {Object.entries(items).map(([key, label], i, arr) => (
+        <button
+          key={key}
+          onClick={() => onChange(key)}
+          className={cx(
+            'px-2 border-b h-8',
+            // i === 0 && 'rounded-l-md',
+            // i === arr.length - 1 && 'rounded-r-md',
+            // value === key ? 'bg-background' : 'bg-lineHighlight',
+            value === key ? 'border-foreground' : 'border-transparent',
+          )}
+        >
+          {label.toLowerCase()}
+        </button>
+      ))}
+    </div>
+  );
+}
diff --git a/website/src/repl/Reference.jsx b/website/src/repl/panel/Reference.jsx
similarity index 97%
rename from website/src/repl/Reference.jsx
rename to website/src/repl/panel/Reference.jsx
index de52982e..6c5d7d99 100644
--- a/website/src/repl/Reference.jsx
+++ b/website/src/repl/panel/Reference.jsx
@@ -1,4 +1,4 @@
-import jsdocJson from '../../../doc.json';
+import jsdocJson from '../../../../doc.json';
 const visibleFunctions = jsdocJson.docs
   .filter(({ name, description }) => name && !name.startsWith('_') && !!description)
   .sort((a, b) => /* a.meta.filename.localeCompare(b.meta.filename) +  */ a.name.localeCompare(b.name));
diff --git a/website/src/repl/panel/SettingsTab.jsx b/website/src/repl/panel/SettingsTab.jsx
new file mode 100644
index 00000000..5dea6258
--- /dev/null
+++ b/website/src/repl/panel/SettingsTab.jsx
@@ -0,0 +1,173 @@
+import React from 'react';
+import { defaultSettings, settingsMap, useSettings } from '../../settings.mjs';
+import { themes } from '../themes.mjs';
+import { ButtonGroup } from './Forms.jsx';
+
+function Checkbox({ label, value, onChange }) {
+  return (
+    <label>
+      <input type="checkbox" checked={value} onChange={onChange} />
+      {' ' + label}
+    </label>
+  );
+}
+
+function SelectInput({ value, options, onChange }) {
+  return (
+    <select
+      className="p-2 bg-background rounded-md text-foreground"
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+    >
+      {Object.entries(options).map(([k, label]) => (
+        <option key={k} className="bg-background" value={k}>
+          {label}
+        </option>
+      ))}
+    </select>
+  );
+}
+
+function NumberSlider({ value, onChange, step = 1, ...rest }) {
+  return (
+    <div className="flex space-x-2 gap-1">
+      <input
+        className="p-2 grow"
+        type="range"
+        value={value}
+        step={step}
+        onChange={(e) => onChange(Number(e.target.value))}
+        {...rest}
+      />
+      <input
+        type="number"
+        value={value}
+        step={step}
+        className="w-16 bg-background rounded-md"
+        onChange={(e) => onChange(Number(e.target.value))}
+      />
+    </div>
+  );
+}
+
+function FormItem({ label, children }) {
+  return (
+    <div className="grid gap-2">
+      <label>{label}</label>
+      {children}
+    </div>
+  );
+}
+
+const themeOptions = Object.fromEntries(Object.keys(themes).map((k) => [k, k]));
+const fontFamilyOptions = {
+  monospace: 'monospace',
+  BigBlueTerminal: 'BigBlueTerminal',
+  x3270: 'x3270',
+  PressStart: 'PressStart2P',
+  galactico: 'galactico',
+  'we-come-in-peace': 'we-come-in-peace',
+  FiraCode: 'FiraCode',
+  'FiraCode-SemiBold': 'FiraCode SemiBold',
+};
+
+export function SettingsTab() {
+  const {
+    theme,
+    keybindings,
+    isLineNumbersDisplayed,
+    isAutoCompletionEnabled,
+    isLineWrappingEnabled,
+    fontSize,
+    fontFamily,
+    panelPosition,
+  } = useSettings();
+
+  return (
+    <div className="text-foreground p-4 space-y-4">
+      {/* <FormItem label="Tempo">
+        <div className="space-x-4">
+          <button
+            onClick={() => {
+              scheduler.setCps(scheduler.cps - 0.1);
+            }}
+          >
+            slower
+          </button>
+          <button
+            onClick={() => {
+              scheduler.setCps(scheduler.cps + 0.1);
+            }}
+          >
+            faster
+          </button>
+        </div>
+      </FormItem> */}
+      <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">
+        <FormItem label="Font Family">
+          <SelectInput
+            options={fontFamilyOptions}
+            value={fontFamily}
+            onChange={(fontFamily) => settingsMap.setKey('fontFamily', fontFamily)}
+          />
+        </FormItem>
+        <FormItem label="Font Size">
+          <NumberSlider
+            value={fontSize}
+            onChange={(fontSize) => settingsMap.setKey('fontSize', fontSize)}
+            min={10}
+            max={40}
+            step={2}
+          />
+        </FormItem>
+      </div>
+      <FormItem label="Keybindings">
+        <ButtonGroup
+          value={keybindings}
+          onChange={(keybindings) => settingsMap.setKey('keybindings', keybindings)}
+          items={{ codemirror: 'Codemirror', vim: 'Vim', emacs: 'Emacs' }}
+        ></ButtonGroup>
+      </FormItem>
+      <FormItem label="Panel Position">
+        <ButtonGroup
+          value={panelPosition}
+          onChange={(value) => settingsMap.setKey('panelPosition', value)}
+          items={{ bottom: 'Bottom', right: 'Right' }}
+        ></ButtonGroup>
+      </FormItem>
+      <FormItem label="Code Settings">
+        <Checkbox
+          label="Display line numbers"
+          onChange={(cbEvent) => settingsMap.setKey('isLineNumbersDisplayed', cbEvent.target.checked)}
+          value={isLineNumbersDisplayed}
+        />
+        <Checkbox
+          label="Enable auto-completion"
+          onChange={(cbEvent) => settingsMap.setKey('isAutoCompletionEnabled', cbEvent.target.checked)}
+          value={isAutoCompletionEnabled}
+        />
+        <Checkbox
+          label="Enable line wrapping"
+          onChange={(cbEvent) => settingsMap.setKey('isLineWrappingEnabled', cbEvent.target.checked)}
+          value={isLineWrappingEnabled}
+        />
+      </FormItem>
+      <FormItem label="Zen Mode">Try clicking the logo in the top left!</FormItem>
+      <FormItem label="Reset Settings">
+        <button
+          className="bg-background p-2 max-w-[300px] rounded-md hover:opacity-50"
+          onClick={() => {
+            if (confirm('Sure?')) {
+              settingsMap.set(defaultSettings);
+            }
+          }}
+        >
+          restore default settings
+        </button>
+      </FormItem>
+    </div>
+  );
+}
diff --git a/website/src/repl/panel/SoundsTab.jsx b/website/src/repl/panel/SoundsTab.jsx
new file mode 100644
index 00000000..b7fbb542
--- /dev/null
+++ b/website/src/repl/panel/SoundsTab.jsx
@@ -0,0 +1,89 @@
+import { useEvent } from '@strudel.cycles/react';
+// import { cx } from '@strudel.cycles/react';
+import { useStore } from '@nanostores/react';
+import { getAudioContext, soundMap } from '@strudel.cycles/webaudio';
+import React, { useMemo, useRef } from 'react';
+import { settingsMap, useSettings } from '../../settings.mjs';
+import { ButtonGroup } from './Forms.jsx';
+
+const getSamples = (samples) =>
+  Array.isArray(samples) ? samples.length : typeof samples === 'object' ? Object.values(samples).length : 1;
+
+export function SoundsTab() {
+  const sounds = useStore(soundMap);
+  const { soundsFilter } = useSettings();
+  const soundEntries = useMemo(() => {
+    let filtered = Object.entries(sounds).filter(([key]) => !key.startsWith('_'));
+    if (!sounds) {
+      return [];
+    }
+    if (soundsFilter === 'user') {
+      return filtered.filter(([key, { data }]) => !data.prebake);
+    }
+    if (soundsFilter === 'drums') {
+      return filtered.filter(([_, { data }]) => data.type === 'sample' && data.tag === 'drum-machines');
+    }
+    if (soundsFilter === 'samples') {
+      return filtered.filter(([_, { data }]) => data.type === 'sample' && data.tag !== 'drum-machines');
+    }
+    if (soundsFilter === 'synths') {
+      return filtered.filter(([_, { data }]) => ['synth', 'soundfont'].includes(data.type));
+    }
+    return filtered;
+  }, [sounds, soundsFilter]);
+  // holds mutable ref to current triggered sound
+  const trigRef = useRef();
+  // stop current sound on mouseup
+  useEvent('mouseup', () => {
+    const t = trigRef.current;
+    trigRef.current = undefined;
+    t?.then((ref) => {
+      ref?.stop(getAudioContext().currentTime + 0.01);
+    });
+  });
+  return (
+    <div id="sounds-tab" className="flex flex-col w-full h-full dark:text-white text-stone-900">
+      <div className="px-2 pb-2 flex-none">
+        <ButtonGroup
+          value={soundsFilter}
+          onChange={(value) => settingsMap.setKey('soundsFilter', value)}
+          items={{
+            samples: 'samples',
+            drums: 'drum-machines',
+            synths: 'Synths',
+            user: 'User',
+          }}
+        ></ButtonGroup>
+      </div>
+      <div className="p-2 min-h-0 max-h-full grow overflow-auto font-mono text-sm break-normal">
+        {soundEntries.map(([name, { data, onTrigger }]) => (
+          <span
+            key={name}
+            className="cursor-pointer hover:opacity-50"
+            onMouseDown={async () => {
+              const ctx = getAudioContext();
+              const params = {
+                note: ['synth', 'soundfont'].includes(data.type) ? 'a3' : undefined,
+                s: name,
+                clip: 1,
+                release: 0.5,
+              };
+              const time = ctx.currentTime + 0.05;
+              const onended = () => trigRef.current?.node?.disconnect();
+              trigRef.current = Promise.resolve(onTrigger(time, params, onended));
+              trigRef.current.then((ref) => {
+                ref?.node.connect(ctx.destination);
+              });
+            }}
+          >
+            {' '}
+            {name}
+            {data?.type === 'sample' ? `(${getSamples(data.samples)})` : ''}
+            {data?.type === 'soundfont' ? `(${data.fonts.length})` : ''}
+          </span>
+        ))}
+        {!soundEntries.length ? 'No custom sounds loaded in this pattern (yet).' : ''}
+      </div>
+    </div>
+  );
+}
diff --git a/website/src/repl/panel/WelcomeTab.jsx b/website/src/repl/panel/WelcomeTab.jsx
new file mode 100644
index 00000000..aca5a813
--- /dev/null
+++ b/website/src/repl/panel/WelcomeTab.jsx
@@ -0,0 +1,49 @@
+import { cx } from '@strudel.cycles/react';
+import React from 'react';
+
+export function WelcomeTab() {
+  return (
+    <div className="prose dark:prose-invert max-w-[600px] pt-2 font-sans pb-8 px-4">
+      <h3>
+        <span className={cx('animate-spin inline-block select-none')}>🌀</span> 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:
+        <br />
+        <br />
+        <span className="underline">1. hit play</span> - <span className="underline">2. change something</span> -{' '}
+        <span className="underline">3. hit update</span>
+        <br />
+        If you don't like what you hear, try <span className="underline">shuffle</span>!
+      </p>
+      <p>
+        To learn more about what this all means, check out the{' '}
+        <a href="./workshop/getting-started" target="_blank">
+          interactive tutorial
+        </a>
+        . Also feel free to join the{' '}
+        <a href="https://discord.com/invite/HGEdXmRkzT" target="_blank">
+          tidalcycles discord channel
+        </a>{' '}
+        to ask any questions, give feedback or just say hello.
+      </p>
+      <h3>about</h3>
+      <p>
+        strudel is a JavaScript version of{' '}
+        <a href="https://tidalcycles.org/" target="_blank">
+          tidalcycles
+        </a>
+        , which is a popular live coding language for music, written in Haskell. You can find the source code at{' '}
+        <a href="https://github.com/tidalcycles/strudel" target="_blank">
+          github
+        </a>
+        . Please consider to{' '}
+        <a href="https://opencollective.com/tidalcycles" target="_blank">
+          support this project
+        </a>{' '}
+        to ensure ongoing development 💖
+      </p>
+    </div>
+  );
+}

From 4e7e715f10dbeb077ce6dba9dc3ba60ef1e2171d Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Sat, 19 Aug 2023 00:20:46 +0200
Subject: [PATCH 02/72] rename footer -> panel

---
 website/src/repl/Repl.jsx                        |  6 +++---
 website/src/repl/{Footer.jsx => panel/Panel.jsx} | 16 ++++++++--------
 2 files changed, 11 insertions(+), 11 deletions(-)
 rename website/src/repl/{Footer.jsx => panel/Panel.jsx} (91%)

diff --git a/website/src/repl/Repl.jsx b/website/src/repl/Repl.jsx
index aa83317d..1e90f2fb 100644
--- a/website/src/repl/Repl.jsx
+++ b/website/src/repl/Repl.jsx
@@ -19,7 +19,7 @@ import { createClient } from '@supabase/supabase-js';
 import { nanoid } from 'nanoid';
 import React, { createContext, useCallback, useEffect, useState, useMemo } from 'react';
 import './Repl.css';
-import { Footer } from './Footer';
+import { Panel } from './panel/Panel';
 import { Header } from './Header';
 import { prebake } from './prebake.mjs';
 import * as tunes from './tunes.mjs';
@@ -321,12 +321,12 @@ export function Repl({ embedded = false }) {
               onSelectionChange={handleSelectionChange}
             />
           </section>
-          {panelPosition === 'right' && !isEmbedded && <Footer context={context} />}
+          {panelPosition === 'right' && !isEmbedded && <Panel context={context} />}
         </div>
         {error && (
           <div className="text-red-500 p-4 bg-lineHighlight animate-pulse">{error.message || 'Unknown Error :-/'}</div>
         )}
-        {panelPosition === 'bottom' && !isEmbedded && <Footer context={context} />}
+        {panelPosition === 'bottom' && !isEmbedded && <Panel context={context} />}
       </div>
     </ReplContext.Provider>
   );
diff --git a/website/src/repl/Footer.jsx b/website/src/repl/panel/Panel.jsx
similarity index 91%
rename from website/src/repl/Footer.jsx
rename to website/src/repl/panel/Panel.jsx
index b27f11c0..430e9835 100644
--- a/website/src/repl/Footer.jsx
+++ b/website/src/repl/panel/Panel.jsx
@@ -3,17 +3,17 @@ import { logger } from '@strudel.cycles/core';
 import { cx, useEvent } from '@strudel.cycles/react';
 import { nanoid } from 'nanoid';
 import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
-import { setActiveFooter, useSettings } from '../settings.mjs';
-import { ConsoleTab } from './panel/ConsoleTab';
-import { FilesTab } from './panel/FilesTab';
-import { Reference } from './panel/Reference';
-import { SettingsTab } from './panel/SettingsTab';
-import { SoundsTab } from './panel/SoundsTab';
-import { WelcomeTab } from './panel/WelcomeTab';
+import { setActiveFooter, useSettings } from '../../settings.mjs';
+import { ConsoleTab } from './ConsoleTab';
+import { FilesTab } from './FilesTab';
+import { Reference } from './Reference';
+import { SettingsTab } from './SettingsTab';
+import { SoundsTab } from './SoundsTab';
+import { WelcomeTab } from './WelcomeTab';
 
 const TAURI = window.__TAURI__;
 
-export function Footer({ context }) {
+export function Panel({ context }) {
   const footerContent = useRef();
   const [log, setLog] = useState([]);
   const { activeFooter, isZen, panelPosition } = useSettings();

From 1855dae35ecb375a901ebc0960ea9f908260b659 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Wed, 23 Aug 2023 22:51:36 +0200
Subject: [PATCH 03/72] add patterns tab with examples

---
 packages/react/src/hooks/useStrudel.mjs |  7 +++++--
 website/src/repl/Repl.jsx               |  4 ++--
 website/src/repl/panel/Panel.jsx        | 17 ++++++++++-------
 website/src/repl/panel/PatternsTab.jsx  | 23 +++++++++++++++++++++++
 4 files changed, 40 insertions(+), 11 deletions(-)
 create mode 100644 website/src/repl/panel/PatternsTab.jsx

diff --git a/packages/react/src/hooks/useStrudel.mjs b/packages/react/src/hooks/useStrudel.mjs
index 223c21ba..d1b256c3 100644
--- a/packages/react/src/hooks/useStrudel.mjs
+++ b/packages/react/src/hooks/useStrudel.mjs
@@ -73,8 +73,11 @@ function useStrudel({
     }
   });
   const activateCode = useCallback(
-    async (autostart = true) => {
-      const res = await evaluate(code, autostart);
+    async (newCode, autostart = true) => {
+      if (newCode) {
+        setCode(code);
+      }
+      const res = await evaluate(newCode || code, autostart);
       broadcast({ type: 'start', from: id });
       return res;
     },
diff --git a/website/src/repl/Repl.jsx b/website/src/repl/Repl.jsx
index 1e90f2fb..94d1b695 100644
--- a/website/src/repl/Repl.jsx
+++ b/website/src/repl/Repl.jsx
@@ -225,8 +225,8 @@ export function Repl({ embedded = false }) {
       stop();
     }
   };
-  const handleUpdate = () => {
-    isDirty && activateCode();
+  const handleUpdate = (newCode) => {
+    (newCode || isDirty) && activateCode(newCode);
     logger('[repl] code updated! tip: you can also update the code by pressing ctrl+enter', 'highlight');
   };
 
diff --git a/website/src/repl/panel/Panel.jsx b/website/src/repl/panel/Panel.jsx
index 430e9835..0642bdea 100644
--- a/website/src/repl/panel/Panel.jsx
+++ b/website/src/repl/panel/Panel.jsx
@@ -10,6 +10,7 @@ import { Reference } from './Reference';
 import { SettingsTab } from './SettingsTab';
 import { SoundsTab } from './SoundsTab';
 import { WelcomeTab } from './WelcomeTab';
+import { PatternsTab } from './PatternsTab';
 
 const TAURI = window.__TAURI__;
 
@@ -54,7 +55,7 @@ export function Panel({ context }) {
     }, []),
   );
 
-  const FooterTab = ({ children, name, label }) => (
+  const PanelTab = ({ children, name, label }) => (
     <>
       <div
         onClick={() => setActiveFooter(name)}
@@ -82,12 +83,13 @@ export function Panel({ context }) {
     <nav className={cx('bg-lineHighlight z-[10] flex flex-col', positions[panelPosition])}>
       <div className="flex justify-between px-2">
         <div className={cx('flex select-none max-w-full overflow-auto', activeFooter && 'pb-2')}>
-          <FooterTab name="intro" label="welcome" />
-          <FooterTab name="sounds" />
-          <FooterTab name="console" />
-          <FooterTab name="reference" />
-          <FooterTab name="settings" />
-          {TAURI && <FooterTab name="files" />}
+          <PanelTab name="intro" label="welcome" />
+          <PanelTab name="sounds" />
+          <PanelTab name="console" />
+          <PanelTab name="patterns" />
+          <PanelTab name="reference" />
+          <PanelTab name="settings" />
+          {TAURI && <PanelTab name="files" />}
         </div>
         {activeFooter !== '' && (
           <button onClick={() => setActiveFooter('')} className="text-foreground px-2" aria-label="Close Panel">
@@ -99,6 +101,7 @@ export function Panel({ context }) {
         <div className="relative overflow-hidden">
           <div className="text-white overflow-auto h-full max-w-full" ref={footerContent}>
             {activeFooter === 'intro' && <WelcomeTab />}
+            {activeFooter === 'patterns' && <PatternsTab context={context} />}
             {activeFooter === 'console' && <ConsoleTab log={log} />}
             {activeFooter === 'sounds' && <SoundsTab />}
             {activeFooter === 'reference' && <Reference />}
diff --git a/website/src/repl/panel/PatternsTab.jsx b/website/src/repl/panel/PatternsTab.jsx
new file mode 100644
index 00000000..2c4d8038
--- /dev/null
+++ b/website/src/repl/panel/PatternsTab.jsx
@@ -0,0 +1,23 @@
+import { cx } from '@strudel.cycles/react';
+import React from 'react';
+import * as tunes from '../tunes.mjs';
+
+export function PatternsTab({ context }) {
+  return (
+    <div className="px-4 w-full">
+      <h2 className="text-xl mb-2">Examples</h2>
+      {Object.entries(tunes).map(([key, tune]) => (
+        <a
+          key={key}
+          className="mr-4 hover:opacity-50 cursor-pointer inline-block"
+          onClick={() => {
+            console.log('clikkk', tune);
+            context.handleUpdate(tune);
+          }}
+        >
+          {key}
+        </a>
+      ))}
+    </div>
+  );
+}

From eb0301d74ee12f0dc09f2958f399b888b55a695a Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Thu, 24 Aug 2023 08:50:18 +0200
Subject: [PATCH 04/72] remove annoying logs

---
 packages/core/repl.mjs    | 2 +-
 website/src/repl/Repl.jsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/core/repl.mjs b/packages/core/repl.mjs
index b6866b87..68bebdbe 100644
--- a/packages/core/repl.mjs
+++ b/packages/core/repl.mjs
@@ -36,7 +36,7 @@ export function repl({
     try {
       await beforeEval?.({ code });
       let { pattern, meta } = await _evaluate(code, transpiler);
-      logger(`[eval] code updated`);
+      // logger(`[eval] code updated`);
       setPattern(pattern, autostart);
       afterEval?.({ code, pattern, meta });
       return pattern;
diff --git a/website/src/repl/Repl.jsx b/website/src/repl/Repl.jsx
index 94d1b695..3f50eecc 100644
--- a/website/src/repl/Repl.jsx
+++ b/website/src/repl/Repl.jsx
@@ -206,7 +206,7 @@ export function Repl({ embedded = false }) {
   const handleChangeCode = useCallback(
     (c) => {
       setCode(c);
-      started && logger('[edit] code changed. hit ctrl+enter to update');
+      // started && logger('[edit] code changed. hit ctrl+enter to update');
     },
     [started],
   );

From 281ad5fac9131ce6ee1c1f2dbb2c0df11b69233d Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Thu, 24 Aug 2023 08:50:42 +0200
Subject: [PATCH 05/72] add nanFallback for better errors

---
 packages/superdough/sampler.mjs    | 3 ++-
 packages/superdough/superdough.mjs | 3 ++-
 packages/superdough/util.mjs       | 8 ++++++++
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/superdough/sampler.mjs b/packages/superdough/sampler.mjs
index 02e5eada..62f06243 100644
--- a/packages/superdough/sampler.mjs
+++ b/packages/superdough/sampler.mjs
@@ -1,4 +1,4 @@
-import { noteToMidi, valueToMidi } from './util.mjs';
+import { noteToMidi, valueToMidi, nanFallback } from './util.mjs';
 import { getAudioContext, registerSound } from './index.mjs';
 import { getEnvelope } from './helpers.mjs';
 import { logger } from './logger.mjs';
@@ -33,6 +33,7 @@ export const getSampleBufferSource = async (s, n, note, speed, freq, bank, resol
   const ac = getAudioContext();
   let sampleUrl;
   if (Array.isArray(bank)) {
+    n = nanFallback(n, 0);
     sampleUrl = bank[n % bank.length];
   } else {
     const midiDiff = (noteA) => noteToMidi(noteA) - midi;
diff --git a/packages/superdough/superdough.mjs b/packages/superdough/superdough.mjs
index 1279000c..1379c1f6 100644
--- a/packages/superdough/superdough.mjs
+++ b/packages/superdough/superdough.mjs
@@ -7,7 +7,7 @@ This program is free software: you can redistribute it and/or modify it under th
 import './feedbackdelay.mjs';
 import './reverb.mjs';
 import './vowel.mjs';
-import { clamp } from './util.mjs';
+import { clamp, nanFallback } from './util.mjs';
 import workletsUrl from './worklets.mjs?url';
 import { getFilter, gainNode } from './helpers.mjs';
 import { map } from 'nanostores';
@@ -168,6 +168,7 @@ export const superdough = async (value, deadline, hapDuration) => {
     size = 2,
     velocity = 1,
   } = value;
+  gain = nanFallback(gain, 1);
   gain *= velocity; // legacy fix for velocity
   let toDisconnect = []; // audio nodes that will be disconnected when the source has ended
   const onended = () => {
diff --git a/packages/superdough/util.mjs b/packages/superdough/util.mjs
index db056376..5ba8e9d5 100644
--- a/packages/superdough/util.mjs
+++ b/packages/superdough/util.mjs
@@ -51,3 +51,11 @@ export const valueToMidi = (value, fallbackValue) => {
   }
   return fallbackValue;
 };
+
+export function nanFallback(value, fallback) {
+  if (isNaN(Number(value))) {
+    logger(`"${value}" is not a number, falling back to ${fallback}`, 'warning');
+    return fallback;
+  }
+  return value;
+}

From c75c3f1ab1cf63ad72df0f835eb5e4a1a779b84e Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Thu, 24 Aug 2023 11:55:21 +0200
Subject: [PATCH 06/72] basic pattern add function

---
 website/src/repl/panel/PatternsTab.jsx | 31 ++++++++++++++++++++++--
 website/src/settings.mjs               | 33 ++++++++++++++++++++++++++
 2 files changed, 62 insertions(+), 2 deletions(-)

diff --git a/website/src/repl/panel/PatternsTab.jsx b/website/src/repl/panel/PatternsTab.jsx
index 2c4d8038..4a4a3930 100644
--- a/website/src/repl/panel/PatternsTab.jsx
+++ b/website/src/repl/panel/PatternsTab.jsx
@@ -1,10 +1,29 @@
-import { cx } from '@strudel.cycles/react';
 import React from 'react';
 import * as tunes from '../tunes.mjs';
+import { useSettings, clearUserPatterns, newUserPattern } from '../../settings.mjs';
 
 export function PatternsTab({ context }) {
+  const { userPatterns } = useSettings();
   return (
-    <div className="px-4 w-full">
+    <div className="px-4 w-full text-foreground">
+      <h2 className="text-xl mb-2">My Patterns</h2>
+      <div className="space-x-1">
+        <button onClick={() => newUserPattern()}>add user pattern</button>
+        <button onClick={() => clearUserPatterns()}>clear user patterns</button>
+      </div>
+      {Object.entries(userPatterns).map(([key, up]) => (
+        <a
+          key={key}
+          className="mr-4 hover:opacity-50 cursor-pointer inline-block"
+          onClick={() => {
+            const { code } = up;
+            console.log('clikkk', code);
+            context.handleUpdate(code);
+          }}
+        >
+          {key}
+        </a>
+      ))}
       <h2 className="text-xl mb-2">Examples</h2>
       {Object.entries(tunes).map(([key, tune]) => (
         <a
@@ -21,3 +40,11 @@ export function PatternsTab({ context }) {
     </div>
   );
 }
+
+/*
+selectable examples
+if example selected
+  type character -> create new user pattern with exampleName_n
+  even if 
+clicking (+) opens the "new" example with same behavior as above
+*/
diff --git a/website/src/settings.mjs b/website/src/settings.mjs
index 036c5509..2bb0ac14 100644
--- a/website/src/settings.mjs
+++ b/website/src/settings.mjs
@@ -15,6 +15,7 @@ export const defaultSettings = {
   isZen: false,
   soundsFilter: 'all',
   panelPosition: 'bottom',
+  userPatterns: '{}',
 };
 
 export const settingsMap = persistentMap('strudel-settings', defaultSettings);
@@ -29,6 +30,7 @@ export function useSettings() {
     isLineWrappingEnabled: [true, 'true'].includes(state.isLineWrappingEnabled) ? true : false,
     fontSize: Number(state.fontSize),
     panelPosition: state.activeFooter !== '' ? state.panelPosition : 'bottom',
+    userPatterns: JSON.parse(state.userPatterns),
   };
 }
 
@@ -51,3 +53,34 @@ export const fontFamily = patternSetting('fontFamily');
 export const fontSize = patternSetting('fontSize');
 
 export const settingPatterns = { theme, fontFamily, fontSize };
+
+function getUserPatterns() {
+  return JSON.parse(settingsMap.get().userPatterns);
+}
+function setUserPatterns(obj) {
+  settingsMap.setKey('userPatterns', JSON.stringify(obj));
+}
+
+export function addUserPattern(name, config) {
+  if (typeof config !== 'object') {
+    throw new Error('addUserPattern expected object as second param');
+  }
+  if (!config.code) {
+    throw new Error('addUserPattern expected code as property of second param');
+  }
+  const userPatterns = getUserPatterns();
+  setUserPatterns({ ...userPatterns, [name]: config });
+}
+
+export function newUserPattern() {
+  const userPatterns = getUserPatterns();
+  const date = new Date().toISOString().split('T')[0];
+  const todays = Object.entries(userPatterns).filter(([name]) => name.startsWith(date));
+  const num = String(todays.length + 1).padStart(3, '0');
+  const defaultNewPattern = 's("hh")';
+  addUserPattern(date + '_' + num, { code: defaultNewPattern });
+}
+
+export function clearUserPatterns() {
+  setUserPatterns({});
+}

From dc254bd5625f2223e44e90fef30cd40e83d2c7ad Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Sun, 17 Sep 2023 17:28:25 +0200
Subject: [PATCH 07/72] upstream changes

---
 website/src/repl/panel/SettingsTab.jsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/website/src/repl/panel/SettingsTab.jsx b/website/src/repl/panel/SettingsTab.jsx
index 5dea6258..bf376a76 100644
--- a/website/src/repl/panel/SettingsTab.jsx
+++ b/website/src/repl/panel/SettingsTab.jsx
@@ -69,6 +69,8 @@ const fontFamilyOptions = {
   'we-come-in-peace': 'we-come-in-peace',
   FiraCode: 'FiraCode',
   'FiraCode-SemiBold': 'FiraCode SemiBold',
+  teletext: 'teletext',
+  mode7: 'mode7',
 };
 
 export function SettingsTab() {

From b245d44220a335ced00303affa9bb22743efff88 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Sun, 29 Oct 2023 13:14:25 +0100
Subject: [PATCH 08/72] hide patterns tab for now + add examples to welcome tab

---
 website/src/repl/panel/Panel.jsx      |  6 +++---
 website/src/repl/panel/WelcomeTab.jsx | 16 +++++++++++++++-
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/website/src/repl/panel/Panel.jsx b/website/src/repl/panel/Panel.jsx
index 0642bdea..a38bdd24 100644
--- a/website/src/repl/panel/Panel.jsx
+++ b/website/src/repl/panel/Panel.jsx
@@ -86,7 +86,7 @@ export function Panel({ context }) {
           <PanelTab name="intro" label="welcome" />
           <PanelTab name="sounds" />
           <PanelTab name="console" />
-          <PanelTab name="patterns" />
+          {/* <PanelTab name="patterns" /> */}
           <PanelTab name="reference" />
           <PanelTab name="settings" />
           {TAURI && <PanelTab name="files" />}
@@ -100,8 +100,8 @@ export function Panel({ context }) {
       {activeFooter !== '' && (
         <div className="relative overflow-hidden">
           <div className="text-white overflow-auto h-full max-w-full" ref={footerContent}>
-            {activeFooter === 'intro' && <WelcomeTab />}
-            {activeFooter === 'patterns' && <PatternsTab context={context} />}
+            {activeFooter === 'intro' && <WelcomeTab context={context} />}
+            {/* {activeFooter === 'patterns' && <PatternsTab context={context} />} */}
             {activeFooter === 'console' && <ConsoleTab log={log} />}
             {activeFooter === 'sounds' && <SoundsTab />}
             {activeFooter === 'reference' && <Reference />}
diff --git a/website/src/repl/panel/WelcomeTab.jsx b/website/src/repl/panel/WelcomeTab.jsx
index aca5a813..5ab8abaf 100644
--- a/website/src/repl/panel/WelcomeTab.jsx
+++ b/website/src/repl/panel/WelcomeTab.jsx
@@ -1,7 +1,8 @@
 import { cx } from '@strudel.cycles/react';
 import React from 'react';
+import * as tunes from '../tunes.mjs';
 
-export function WelcomeTab() {
+export function WelcomeTab({ context }) {
   return (
     <div className="prose dark:prose-invert max-w-[600px] pt-2 font-sans pb-8 px-4">
       <h3>
@@ -44,6 +45,19 @@ export function WelcomeTab() {
         </a>{' '}
         to ensure ongoing development 💖
       </p>
+      <h2 className="text-xl mb-2">examples</h2>
+      {Object.entries(tunes).map(([key, tune]) => (
+        <a
+          key={key}
+          className="mr-4 hover:opacity-50 cursor-pointer inline-block"
+          onClick={() => {
+            console.log('clikkk', tune);
+            context.handleUpdate(tune);
+          }}
+        >
+          {key}
+        </a>
+      ))}
     </div>
   );
 }

From a2077f7be188339277cbda9809c630634af0f745 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Sun, 29 Oct 2023 13:14:29 +0100
Subject: [PATCH 09/72] fix logger import

---
 packages/superdough/util.mjs | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/superdough/util.mjs b/packages/superdough/util.mjs
index 5ba8e9d5..d49ffd6b 100644
--- a/packages/superdough/util.mjs
+++ b/packages/superdough/util.mjs
@@ -1,3 +1,5 @@
+import { logger } from './logger.mjs';
+
 // currently duplicate with core util.mjs to skip dependency
 // TODO: add separate util module?
 

From 53160c638abfc0c2ca4301b5d3713a937b5942d6 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Sun, 29 Oct 2023 14:00:13 +0100
Subject: [PATCH 10/72] half working user pattern management

---
 website/src/repl/Repl.jsx              |  4 +-
 website/src/repl/panel/Panel.jsx       |  4 +-
 website/src/repl/panel/PatternsTab.jsx | 52 +++++++++++++++++---
 website/src/settings.mjs               | 67 +++++++++++++++++++++++++-
 4 files changed, 115 insertions(+), 12 deletions(-)

diff --git a/website/src/repl/Repl.jsx b/website/src/repl/Repl.jsx
index 524c7db4..7ce47c74 100644
--- a/website/src/repl/Repl.jsx
+++ b/website/src/repl/Repl.jsx
@@ -17,7 +17,7 @@ import { prebake } from './prebake.mjs';
 import * as tunes from './tunes.mjs';
 import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon';
 import { themes } from './themes.mjs';
-import { settingsMap, useSettings, setLatestCode } from '../settings.mjs';
+import { settingsMap, useSettings, setLatestCode, updateUserPattern } from '../settings.mjs';
 import Loader from './Loader';
 import { settingPatterns } from '../settings.mjs';
 import { code2hash, hash2code } from './helpers.mjs';
@@ -128,6 +128,7 @@ export function Repl({ embedded = false }) {
     isLineWrappingEnabled,
     panelPosition,
     isZen,
+    activePattern,
   } = useSettings();
 
   const paintOptions = useMemo(() => ({ fontFamily }), [fontFamily]);
@@ -144,6 +145,7 @@ export function Repl({ embedded = false }) {
         cleanupDraw();
       },
       afterEval: ({ code, meta }) => {
+        updateUserPattern(code);
         setMiniLocations(meta.miniLocations);
         setWidgets(meta.widgets);
         setPending(false);
diff --git a/website/src/repl/panel/Panel.jsx b/website/src/repl/panel/Panel.jsx
index a38bdd24..711bd644 100644
--- a/website/src/repl/panel/Panel.jsx
+++ b/website/src/repl/panel/Panel.jsx
@@ -86,7 +86,7 @@ export function Panel({ context }) {
           <PanelTab name="intro" label="welcome" />
           <PanelTab name="sounds" />
           <PanelTab name="console" />
-          {/* <PanelTab name="patterns" /> */}
+          <PanelTab name="patterns" />
           <PanelTab name="reference" />
           <PanelTab name="settings" />
           {TAURI && <PanelTab name="files" />}
@@ -101,7 +101,7 @@ export function Panel({ context }) {
         <div className="relative overflow-hidden">
           <div className="text-white overflow-auto h-full max-w-full" ref={footerContent}>
             {activeFooter === 'intro' && <WelcomeTab context={context} />}
-            {/* {activeFooter === 'patterns' && <PatternsTab context={context} />} */}
+            {activeFooter === 'patterns' && <PatternsTab context={context} />}
             {activeFooter === 'console' && <ConsoleTab log={log} />}
             {activeFooter === 'sounds' && <SoundsTab />}
             {activeFooter === 'reference' && <Reference />}
diff --git a/website/src/repl/panel/PatternsTab.jsx b/website/src/repl/panel/PatternsTab.jsx
index 4a4a3930..60096bc8 100644
--- a/website/src/repl/panel/PatternsTab.jsx
+++ b/website/src/repl/panel/PatternsTab.jsx
@@ -1,24 +1,57 @@
 import React from 'react';
 import * as tunes from '../tunes.mjs';
-import { useSettings, clearUserPatterns, newUserPattern } from '../../settings.mjs';
+import {
+  useSettings,
+  clearUserPatterns,
+  newUserPattern,
+  setActivePattern,
+  deleteActivePattern,
+  duplicateActivePattern,
+  getUserPattern,
+} from '../../settings.mjs';
+
+function classNames(...classes) {
+  return classes.filter(Boolean).join(' ');
+}
 
 export function PatternsTab({ context }) {
-  const { userPatterns } = useSettings();
+  const { userPatterns, activePattern } = useSettings();
   return (
     <div className="px-4 w-full text-foreground">
       <h2 className="text-xl mb-2">My Patterns</h2>
       <div className="space-x-1">
-        <button onClick={() => newUserPattern()}>add user pattern</button>
-        <button onClick={() => clearUserPatterns()}>clear user patterns</button>
+        <button
+          className="underline"
+          onClick={() => {
+            const name = newUserPattern();
+            const { code } = getUserPattern(name);
+            console.log('code', code);
+            context.handleUpdate(code);
+          }}
+        >
+          new
+        </button>
+        <button className="underline" onClick={() => duplicateActivePattern()}>
+          duplicate
+        </button>
+        <button className="underline" onClick={() => deleteActivePattern()}>
+          delete
+        </button>
+        <button className="underline" onClick={() => clearUserPatterns()}>
+          clear
+        </button>
       </div>
       {Object.entries(userPatterns).map(([key, up]) => (
         <a
           key={key}
-          className="mr-4 hover:opacity-50 cursor-pointer inline-block"
+          className={classNames(
+            'mr-4 hover:opacity-50 cursor-pointer inline-block',
+            key === activePattern ? 'underline' : '',
+          )}
           onClick={() => {
             const { code } = up;
-            console.log('clikkk', code);
             context.handleUpdate(code);
+            setActivePattern(key);
           }}
         >
           {key}
@@ -28,9 +61,12 @@ export function PatternsTab({ context }) {
       {Object.entries(tunes).map(([key, tune]) => (
         <a
           key={key}
-          className="mr-4 hover:opacity-50 cursor-pointer inline-block"
+          className={classNames(
+            'mr-4 hover:opacity-50 cursor-pointer inline-block',
+            key === activePattern ? 'underline' : '',
+          )}
           onClick={() => {
-            console.log('clikkk', tune);
+            setActivePattern(key);
             context.handleUpdate(tune);
           }}
         >
diff --git a/website/src/settings.mjs b/website/src/settings.mjs
index 72ddace4..cb580eec 100644
--- a/website/src/settings.mjs
+++ b/website/src/settings.mjs
@@ -1,6 +1,7 @@
 import { persistentMap } from '@nanostores/persistent';
 import { useStore } from '@nanostores/react';
 import { register } from '@strudel.cycles/core';
+import * as tunes from './repl/tunes.mjs';
 
 export const defaultSettings = {
   activeFooter: 'intro',
@@ -16,6 +17,7 @@ export const defaultSettings = {
   soundsFilter: 'all',
   panelPosition: 'bottom',
   userPatterns: '{}',
+  activePattern: '',
 };
 
 export const settingsMap = persistentMap('strudel-settings', defaultSettings);
@@ -59,6 +61,10 @@ export const settingPatterns = { theme, fontFamily, fontSize };
 function getUserPatterns() {
   return JSON.parse(settingsMap.get().userPatterns);
 }
+function getSetting(key) {
+  return settingsMap.get()[key];
+}
+
 function setUserPatterns(obj) {
   settingsMap.setKey('userPatterns', JSON.stringify(obj));
 }
@@ -80,9 +86,68 @@ export function newUserPattern() {
   const todays = Object.entries(userPatterns).filter(([name]) => name.startsWith(date));
   const num = String(todays.length + 1).padStart(3, '0');
   const defaultNewPattern = 's("hh")';
-  addUserPattern(date + '_' + num, { code: defaultNewPattern });
+  const name = date + '_' + num;
+  addUserPattern(name, { code: defaultNewPattern });
+  setActivePattern(name);
+  return name;
 }
 
 export function clearUserPatterns() {
   setUserPatterns({});
 }
+
+export function getNextCloneName(key) {
+  const userPatterns = getUserPatterns();
+  const clones = Object.entries(userPatterns).filter(([name]) => name.startsWith(key));
+  const num = String(clones.length + 1).padStart(3, '0');
+  return key + '_' + num;
+}
+
+export function getUserPattern(key) {
+  const userPatterns = getUserPatterns();
+  return userPatterns[key];
+}
+
+export function updateUserPattern(code) {
+  const userPatterns = getUserPatterns();
+  let activePattern = getSetting('activePattern');
+  console.log('update', activePattern, code);
+  if (!activePattern) {
+    activePattern = newUserPattern();
+    setUserPatterns({ ...userPatterns, [activePattern]: { code } });
+    setActivePattern(activePattern);
+  } else if (!!tunes[activePattern] && code !== tunes[activePattern]) {
+    // is example / system pattern
+    activePattern = getNextCloneName(activePattern);
+    setUserPatterns({ ...userPatterns, [activePattern]: { code } });
+    setActivePattern(activePattern);
+  }
+}
+
+export function deleteActivePattern() {
+  let activePattern = getSetting('activePattern');
+  if (!activePattern) {
+    console.warn('cannot delete: no pattern selected');
+    return;
+  }
+  const userPatterns = getUserPatterns();
+  setUserPatterns(Object.fromEntries(Object.entries(userPatterns).filter(([key]) => key !== activePattern)));
+  setActivePattern('');
+}
+
+export function duplicateActivePattern() {
+  let activePattern = getSetting('activePattern');
+  let latestCode = getSetting('latestCode');
+  if (!activePattern) {
+    console.warn('cannot duplicate: no pattern selected');
+    return;
+  }
+  const userPatterns = getUserPatterns();
+  activePattern = getNextCloneName(activePattern);
+  setUserPatterns({ ...userPatterns, [activePattern]: { latestCode } });
+  setActivePattern(activePattern);
+}
+
+export function setActivePattern(key) {
+  settingsMap.setKey('activePattern', key);
+}

From c6f89431d9dfe24cd65c6d11199746a5be1369b8 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 17 Nov 2023 20:37:21 +0100
Subject: [PATCH 11/72] fix: merge error

---
 website/src/repl/panel/SettingsTab.jsx | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/website/src/repl/panel/SettingsTab.jsx b/website/src/repl/panel/SettingsTab.jsx
index 3ede2295..cee5b286 100644
--- a/website/src/repl/panel/SettingsTab.jsx
+++ b/website/src/repl/panel/SettingsTab.jsx
@@ -153,11 +153,6 @@ export function SettingsTab() {
           onChange={(cbEvent) => settingsMap.setKey('isActiveLineHighlighted', cbEvent.target.checked)}
           value={isActiveLineHighlighted}
         />
-        <Checkbox
-          label="Highlight active line"
-          onChange={(cbEvent) => settingsMap.setKey('isActiveLineHighlighted', cbEvent.target.checked)}
-          value={isActiveLineHighlighted}
-        />
         <Checkbox
           label="Enable auto-completion"
           onChange={(cbEvent) => settingsMap.setKey('isAutoCompletionEnabled', cbEvent.target.checked)}

From 34c1f3c7de56fdf1a9d7622dfba0e14cc12e018e Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 17 Nov 2023 20:54:48 +0100
Subject: [PATCH 12/72] fix: examples layout

---
 website/src/repl/panel/WelcomeTab.jsx | 23 +++++++++++------------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/website/src/repl/panel/WelcomeTab.jsx b/website/src/repl/panel/WelcomeTab.jsx
index 5ab8abaf..8c4e7de6 100644
--- a/website/src/repl/panel/WelcomeTab.jsx
+++ b/website/src/repl/panel/WelcomeTab.jsx
@@ -46,18 +46,17 @@ export function WelcomeTab({ context }) {
         to ensure ongoing development 💖
       </p>
       <h2 className="text-xl mb-2">examples</h2>
-      {Object.entries(tunes).map(([key, tune]) => (
-        <a
-          key={key}
-          className="mr-4 hover:opacity-50 cursor-pointer inline-block"
-          onClick={() => {
-            console.log('clikkk', tune);
-            context.handleUpdate(tune);
-          }}
-        >
-          {key}
-        </a>
-      ))}
+      <div className="not-prose">
+        {Object.entries(tunes).map(([key, tune]) => (
+          <a
+            key={key}
+            className="mr-4 hover:opacity-50 cursor-pointer inline-block"
+            onClick={() => context.handleUpdate(tune)}
+          >
+            {key}
+          </a>
+        ))}
+      </div>
     </div>
   );
 }

From e5f9467329c29ba6a6d399ed1716ad9e4020606c Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 17 Nov 2023 20:55:04 +0100
Subject: [PATCH 13/72] fix: slight layout improvement

---
 website/src/repl/panel/PatternsTab.jsx | 115 +++++++++++++------------
 1 file changed, 59 insertions(+), 56 deletions(-)

diff --git a/website/src/repl/panel/PatternsTab.jsx b/website/src/repl/panel/PatternsTab.jsx
index 60096bc8..f5f528dc 100644
--- a/website/src/repl/panel/PatternsTab.jsx
+++ b/website/src/repl/panel/PatternsTab.jsx
@@ -17,62 +17,65 @@ function classNames(...classes) {
 export function PatternsTab({ context }) {
   const { userPatterns, activePattern } = useSettings();
   return (
-    <div className="px-4 w-full text-foreground">
-      <h2 className="text-xl mb-2">My Patterns</h2>
-      <div className="space-x-1">
-        <button
-          className="underline"
-          onClick={() => {
-            const name = newUserPattern();
-            const { code } = getUserPattern(name);
-            console.log('code', code);
-            context.handleUpdate(code);
-          }}
-        >
-          new
-        </button>
-        <button className="underline" onClick={() => duplicateActivePattern()}>
-          duplicate
-        </button>
-        <button className="underline" onClick={() => deleteActivePattern()}>
-          delete
-        </button>
-        <button className="underline" onClick={() => clearUserPatterns()}>
-          clear
-        </button>
-      </div>
-      {Object.entries(userPatterns).map(([key, up]) => (
-        <a
-          key={key}
-          className={classNames(
-            'mr-4 hover:opacity-50 cursor-pointer inline-block',
-            key === activePattern ? 'underline' : '',
-          )}
-          onClick={() => {
-            const { code } = up;
-            context.handleUpdate(code);
-            setActivePattern(key);
-          }}
-        >
-          {key}
-        </a>
-      ))}
-      <h2 className="text-xl mb-2">Examples</h2>
-      {Object.entries(tunes).map(([key, tune]) => (
-        <a
-          key={key}
-          className={classNames(
-            'mr-4 hover:opacity-50 cursor-pointer inline-block',
-            key === activePattern ? 'underline' : '',
-          )}
-          onClick={() => {
-            setActivePattern(key);
-            context.handleUpdate(tune);
-          }}
-        >
-          {key}
-        </a>
-      ))}
+    <div className="px-4 w-full text-foreground space-y-4">
+      <section>
+        <h2 className="text-xl mb-2">My Patterns</h2>
+        <div className="space-x-1">
+          <button
+            className="underline"
+            onClick={() => {
+              const name = newUserPattern();
+              const { code } = getUserPattern(name);
+              context.handleUpdate(code);
+            }}
+          >
+            new
+          </button>
+          <button className="underline" onClick={() => duplicateActivePattern()}>
+            duplicate
+          </button>
+          <button className="underline" onClick={() => deleteActivePattern()}>
+            delete
+          </button>
+          <button className="underline" onClick={() => clearUserPatterns()}>
+            clear
+          </button>
+        </div>
+        {Object.entries(userPatterns).map(([key, up]) => (
+          <a
+            key={key}
+            className={classNames(
+              'mr-4 hover:opacity-50 cursor-pointer inline-block',
+              key === activePattern ? 'underline' : '',
+            )}
+            onClick={() => {
+              const { code } = up;
+              setActivePattern(key);
+              context.handleUpdate(code);
+            }}
+          >
+            {key}
+          </a>
+        ))}
+      </section>
+      <section>
+        <h2 className="text-xl mb-2">Examples</h2>
+        {Object.entries(tunes).map(([key, tune]) => (
+          <a
+            key={key}
+            className={classNames(
+              'mr-4 hover:opacity-50 cursor-pointer inline-block',
+              key === activePattern ? 'underline' : '',
+            )}
+            onClick={() => {
+              setActivePattern(key);
+              context.handleUpdate(tune);
+            }}
+          >
+            {key}
+          </a>
+        ))}
+      </section>
     </div>
   );
 }

From 4cae6c051b494052613b72de9cafbf72f84f6dca Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 17 Nov 2023 20:55:23 +0100
Subject: [PATCH 14/72] fix: save pattern

---
 website/src/settings.mjs | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/website/src/settings.mjs b/website/src/settings.mjs
index 22c7f5a1..75980db4 100644
--- a/website/src/settings.mjs
+++ b/website/src/settings.mjs
@@ -115,17 +115,15 @@ export function getUserPattern(key) {
 export function updateUserPattern(code) {
   const userPatterns = getUserPatterns();
   let activePattern = getSetting('activePattern');
-  console.log('update', activePattern, code);
   if (!activePattern) {
     activePattern = newUserPattern();
-    setUserPatterns({ ...userPatterns, [activePattern]: { code } });
     setActivePattern(activePattern);
   } else if (!!tunes[activePattern] && code !== tunes[activePattern]) {
     // is example / system pattern
     activePattern = getNextCloneName(activePattern);
-    setUserPatterns({ ...userPatterns, [activePattern]: { code } });
     setActivePattern(activePattern);
   }
+  setUserPatterns({ ...userPatterns, [activePattern]: { code } });
 }
 
 export function deleteActivePattern() {
@@ -148,7 +146,7 @@ export function duplicateActivePattern() {
   }
   const userPatterns = getUserPatterns();
   activePattern = getNextCloneName(activePattern);
-  setUserPatterns({ ...userPatterns, [activePattern]: { latestCode } });
+  setUserPatterns({ ...userPatterns, [activePattern]: { code: latestCode } });
   setActivePattern(activePattern);
 }
 

From b8ca83ddd1bc5c869e7b45659a5538efdc46e2b0 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 17 Nov 2023 21:29:50 +0100
Subject: [PATCH 15/72] rename pattern

---
 website/src/repl/panel/PatternsTab.jsx |  4 ++++
 website/src/settings.mjs               | 14 ++++++++++++++
 2 files changed, 18 insertions(+)

diff --git a/website/src/repl/panel/PatternsTab.jsx b/website/src/repl/panel/PatternsTab.jsx
index f5f528dc..d117efe1 100644
--- a/website/src/repl/panel/PatternsTab.jsx
+++ b/website/src/repl/panel/PatternsTab.jsx
@@ -8,6 +8,7 @@ import {
   deleteActivePattern,
   duplicateActivePattern,
   getUserPattern,
+  renameActivePattern,
 } from '../../settings.mjs';
 
 function classNames(...classes) {
@@ -34,6 +35,9 @@ export function PatternsTab({ context }) {
           <button className="underline" onClick={() => duplicateActivePattern()}>
             duplicate
           </button>
+          <button className="underline" onClick={() => renameActivePattern()}>
+            rename
+          </button>
           <button className="underline" onClick={() => deleteActivePattern()}>
             delete
           </button>
diff --git a/website/src/settings.mjs b/website/src/settings.mjs
index 75980db4..2f9feaae 100644
--- a/website/src/settings.mjs
+++ b/website/src/settings.mjs
@@ -112,6 +112,20 @@ export function getUserPattern(key) {
   return userPatterns[key];
 }
 
+export function renameActivePattern() {
+  const newName = prompt('Enter new name');
+  let userPatterns = getUserPatterns();
+  if (userPatterns[newName]) {
+    alert('Name already taken!');
+    return;
+  }
+  let activePattern = getSetting('activePattern');
+  userPatterns[newName] = userPatterns[activePattern]; // copy code
+  delete userPatterns[activePattern];
+  setUserPatterns({ ...userPatterns });
+  setActivePattern(newName);
+}
+
 export function updateUserPattern(code) {
   const userPatterns = getUserPatterns();
   let activePattern = getSetting('activePattern');

From 7aa217828b5ee8cfc553a98ba8f7cdebff01b033 Mon Sep 17 00:00:00 2001
From: Jade Rowland <jaderowlanddev@gmail.com>
Date: Mon, 20 Nov 2023 23:06:35 -0500
Subject: [PATCH 16/72] testing

---
 packages/superdough/superdough.mjs | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/superdough/superdough.mjs b/packages/superdough/superdough.mjs
index 00e2f42c..be9a3df9 100644
--- a/packages/superdough/superdough.mjs
+++ b/packages/superdough/superdough.mjs
@@ -30,7 +30,11 @@ let audioContext;
 export const getAudioContext = () => {
   if (!audioContext) {
     audioContext = new AudioContext();
+    var maxChannelCount = audioContext.destination.maxChannelCount;
+    audioContext.destination.channelCount = maxChannelCount;
   }
+  //console.log(audioContext.destination.maxChannelCount);
+
   return audioContext;
 };
 
@@ -39,7 +43,10 @@ const getDestination = () => {
   const ctx = getAudioContext();
   if (!destination) {
     destination = ctx.createGain();
-    destination.connect(ctx.destination);
+    var merger = ctx.createChannelMerger(ctx.destination.channelCount);
+    merger.connect(ctx.destination);
+    destination.connect(merger, 0, 4);
+    destination.connect(merger, 0, 5);
   }
   return destination;
 };

From f0b458cd1775e8ed3f82c10d048d00a560e57c58 Mon Sep 17 00:00:00 2001
From: Jade Rowland <jaderowlanddev@gmail.com>
Date: Wed, 22 Nov 2023 00:03:34 -0500
Subject: [PATCH 17/72] need to figure out channels input + seperating left
 right channels from source

---
 packages/core/controls.mjs         | 13 +++++++
 packages/superdough/superdough.mjs | 60 ++++++++++++++++++++++--------
 2 files changed, 57 insertions(+), 16 deletions(-)

diff --git a/packages/core/controls.mjs b/packages/core/controls.mjs
index a03658a8..a4db48cb 100644
--- a/packages/core/controls.mjs
+++ b/packages/core/controls.mjs
@@ -381,6 +381,19 @@ const generic_params = [
    */
   ['coarse'],
 
+  /**
+   * Allows you to set the output channels on the interface
+   *
+   * @name channels
+   * @synonyms ch
+   *
+   * @param {!Float32Array} channels Array<int>
+   * @example
+   * note("e a d b g").channels([2, 3]).room(1)
+   *
+   */
+  ['channels', 'ch'],
+
   ['phaserrate', 'phasr'], // superdirt only
 
   /**
diff --git a/packages/superdough/superdough.mjs b/packages/superdough/superdough.mjs
index be9a3df9..ef77db8a 100644
--- a/packages/superdough/superdough.mjs
+++ b/packages/superdough/superdough.mjs
@@ -27,6 +27,7 @@ export function getSound(s) {
 export const resetLoadedSounds = () => soundMap.set({});
 
 let audioContext;
+
 export const getAudioContext = () => {
   if (!audioContext) {
     audioContext = new AudioContext();
@@ -37,23 +38,39 @@ export const getAudioContext = () => {
 
   return audioContext;
 };
-
-let destination;
-const getDestination = () => {
+// outputs: Map<int, audiGainNode>
+const outputs = new Map();
+let channelMerger;
+// channels: Array<int>
+const getDestinations = (channels) => {
   const ctx = getAudioContext();
-  if (!destination) {
-    destination = ctx.createGain();
-    var merger = ctx.createChannelMerger(ctx.destination.channelCount);
-    merger.connect(ctx.destination);
-    destination.connect(merger, 0, 4);
-    destination.connect(merger, 0, 5);
+  if (channelMerger == null) {
+    channelMerger = ctx.createChannelMerger(ctx.destination.channelCount);
+    channelMerger.connect(ctx.destination);
   }
-  return destination;
+  channels.forEach((ch) => {
+    if (!outputs.has(ch)) {
+      const gain = ctx.createGain();
+      gain.channelInterpretation = 'discrete';
+      gain.connect(channelMerger, 0, ch);
+      outputs.set(ch, gain);
+    }
+  });
+  // if (!destination) {
+  //   destination = ctx.createGain();
+  //   channelMerger = ctx.createChannelMerger(ctx.destination.channelCount);
+  //   channelMerger.connect(ctx.destination);
+  //   destination.connect(channelMerger, 0, 4);
+  //   destination.connect(channelMerger, 0, 5);
+  // }
+  return channels.map((ch) => outputs.get(ch));
 };
 
 export const panic = () => {
-  getDestination().gain.linearRampToValueAtTime(0, getAudioContext().currentTime + 0.01);
-  destination = null;
+  outputs.forEach((output) => {
+    return output.gain.linearRampToValueAtTime(0, getAudioContext().currentTime + 0.01);
+  });
+  outputs.clear();
 };
 
 let workletsLoading;
@@ -101,6 +118,15 @@ export async function initAudioOnFirstClick(options) {
 
 let delays = {};
 const maxfeedback = 0.98;
+//input: audioNode, channels: Array<int>
+const connectToOutputs = (input, channels = [0, 1]) => {
+  const outputs = getDestinations(channels);
+  console.log(input);
+
+  outputs.forEach((output, i) => {
+    input.connect(output, 0);
+  });
+};
 
 function getDelay(orbit, delaytime, delayfeedback, t) {
   if (delayfeedback > maxfeedback) {
@@ -111,7 +137,7 @@ function getDelay(orbit, delaytime, delayfeedback, t) {
     const ac = getAudioContext();
     const dly = ac.createFeedbackDelay(1, delaytime, delayfeedback);
     dly.start?.(t); // for some reason, this throws when audion extension is installed..
-    dly.connect(getDestination());
+    connectToOutputs(dly, [0, 1]);
     delays[orbit] = dly;
   }
   delays[orbit].delayTime.value !== delaytime && delays[orbit].delayTime.setValueAtTime(delaytime, t);
@@ -170,7 +196,7 @@ function getReverb(orbit, duration, fade, lp, dim, ir) {
   if (!reverbs[orbit]) {
     const ac = getAudioContext();
     const reverb = ac.createReverb(duration, fade, lp, dim, ir);
-    reverb.connect(getDestination());
+    connectToOutputs(reverb, [0, 1]);
     reverbs[orbit] = reverb;
   }
   if (
@@ -275,7 +301,7 @@ export const superdough = async (value, deadline, hapDuration) => {
     bpsustain = 1,
     bprelease = 0.01,
     bandq = 1,
-
+    channels = [0, 1],
     //phaser
     phaser,
     phaserdepth = 0.75,
@@ -442,7 +468,9 @@ export const superdough = async (value, deadline, hapDuration) => {
   // last gain
   const post = gainNode(postgain);
   chain.push(post);
-  post.connect(getDestination());
+  console.log(channels);
+  // this should be an array but is getting interpreted as an int for some reason...
+  connectToOutputs(post, [channels]);
 
   // delay
   let delaySend;

From e41973371690d4cc2ac4b6b1123182d63a0feb34 Mon Sep 17 00:00:00 2001
From: Jade Rowland <jaderowlanddev@gmail.com>
Date: Thu, 23 Nov 2023 01:04:53 -0500
Subject: [PATCH 18/72] channel splitting and channels parameter

---
 packages/core/controls.mjs         | 35 +++++++++++++++----------
 packages/superdough/superdough.mjs | 41 +++++++++++++++---------------
 2 files changed, 42 insertions(+), 34 deletions(-)

diff --git a/packages/core/controls.mjs b/packages/core/controls.mjs
index a4db48cb..899e57e9 100644
--- a/packages/core/controls.mjs
+++ b/packages/core/controls.mjs
@@ -4,7 +4,7 @@ Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/st
 This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { Pattern, register, sequence } from './pattern.mjs';
+import { Pattern, register, reify, sequence } from './pattern.mjs';
 import { zipWith } from './util.mjs';
 
 const controls = {};
@@ -381,18 +381,18 @@ const generic_params = [
    */
   ['coarse'],
 
-  /**
-   * Allows you to set the output channels on the interface
-   *
-   * @name channels
-   * @synonyms ch
-   *
-   * @param {!Float32Array} channels Array<int>
-   * @example
-   * note("e a d b g").channels([2, 3]).room(1)
-   *
-   */
-  ['channels', 'ch'],
+  // /**
+  //  * Allows you to set the output channels on the interface
+  //  *
+  //  * @name channels
+  //  * @synonyms ch
+  //  *
+  //  * @param {!Float32Array} channels Array<int>
+  //  * @example
+  //  * note("e a d b g").channels([2, 3]).room(1)
+  //  *
+  //  */
+  // ['channels', 'ch'],
 
   ['phaserrate', 'phasr'], // superdirt only
 
@@ -1390,4 +1390,13 @@ controls.ds = register('ds', (ds, pat) => {
   return pat.set({ decay, sustain });
 });
 
+controls.ch = register(['channels', 'ch'], (channels, pat) => {
+  channels = !Array.isArray(channels) ? [channels] : channels;
+
+  // channels = channels.map(reify).map((channelPat) => {
+  //   // How do I return the current value of the channel pattern here?
+  // });
+  return pat.set({ channels });
+});
+
 export default controls;
diff --git a/packages/superdough/superdough.mjs b/packages/superdough/superdough.mjs
index ef77db8a..3cccfc96 100644
--- a/packages/superdough/superdough.mjs
+++ b/packages/superdough/superdough.mjs
@@ -31,38 +31,33 @@ let audioContext;
 export const getAudioContext = () => {
   if (!audioContext) {
     audioContext = new AudioContext();
-    var maxChannelCount = audioContext.destination.maxChannelCount;
+    const maxChannelCount = audioContext.destination.maxChannelCount;
     audioContext.destination.channelCount = maxChannelCount;
   }
-  //console.log(audioContext.destination.maxChannelCount);
-
   return audioContext;
 };
-// outputs: Map<int, audiGainNode>
+// outputs: Map<int, GainNode>
 const outputs = new Map();
 let channelMerger;
 // channels: Array<int>
 const getDestinations = (channels) => {
   const ctx = getAudioContext();
   if (channelMerger == null) {
-    channelMerger = ctx.createChannelMerger(ctx.destination.channelCount);
+    channelMerger = new ChannelMergerNode(ctx, { numberOfInputs: ctx.destination.channelCount });
     channelMerger.connect(ctx.destination);
   }
   channels.forEach((ch) => {
     if (!outputs.has(ch)) {
-      const gain = ctx.createGain();
-      gain.channelInterpretation = 'discrete';
+      const gain = new GainNode(ctx, {
+        channelInterpretation: 'discrete',
+        channelCount: 1,
+        channelCountMode: 'explicit',
+      });
       gain.connect(channelMerger, 0, ch);
       outputs.set(ch, gain);
     }
   });
-  // if (!destination) {
-  //   destination = ctx.createGain();
-  //   channelMerger = ctx.createChannelMerger(ctx.destination.channelCount);
-  //   channelMerger.connect(ctx.destination);
-  //   destination.connect(channelMerger, 0, 4);
-  //   destination.connect(channelMerger, 0, 5);
-  // }
+
   return channels.map((ch) => outputs.get(ch));
 };
 
@@ -121,10 +116,15 @@ const maxfeedback = 0.98;
 //input: audioNode, channels: Array<int>
 const connectToOutputs = (input, channels = [0, 1]) => {
   const outputs = getDestinations(channels);
-  console.log(input);
-
+  const ctx = getAudioContext();
+  const center = new StereoPannerNode(ctx);
+  input.connect(center);
+  const splitter = new ChannelSplitterNode(ctx, {
+    numberOfOutputs: input.channelCount,
+  });
+  center.connect(splitter);
   outputs.forEach((output, i) => {
-    input.connect(output, 0);
+    splitter.connect(output, i % input.channelCount, 0);
   });
 };
 
@@ -333,6 +333,7 @@ export const superdough = async (value, deadline, hapDuration) => {
     compressorAttack,
     compressorRelease,
   } = value;
+
   gain *= velocity; // legacy fix for velocity
   let toDisconnect = []; // audio nodes that will be disconnected when the source has ended
   const onended = () => {
@@ -466,11 +467,9 @@ export const superdough = async (value, deadline, hapDuration) => {
   }
 
   // last gain
-  const post = gainNode(postgain);
+  const post = new GainNode(ac, { gain: postgain });
   chain.push(post);
-  console.log(channels);
-  // this should be an array but is getting interpreted as an int for some reason...
-  connectToOutputs(post, [channels]);
+  connectToOutputs(post, channels);
 
   // delay
   let delaySend;

From 3fd5fdf1eec830b5d5ebba660ed1aab979b65c6c Mon Sep 17 00:00:00 2001
From: Jade Rowland <jaderowlanddev@gmail.com>
Date: Thu, 23 Nov 2023 12:43:51 -0500
Subject: [PATCH 19/72] preview outputs should be stereo

---
 packages/core/controls.mjs         | 38 +++++++++++++++---------------
 packages/superdough/superdough.mjs | 21 +++++++++++++----
 packages/superdough/synth.mjs      |  6 ++---
 website/src/repl/Footer.jsx        |  4 ++--
 4 files changed, 40 insertions(+), 29 deletions(-)

diff --git a/packages/core/controls.mjs b/packages/core/controls.mjs
index 899e57e9..01b46a9e 100644
--- a/packages/core/controls.mjs
+++ b/packages/core/controls.mjs
@@ -381,18 +381,18 @@ const generic_params = [
    */
   ['coarse'],
 
-  // /**
-  //  * Allows you to set the output channels on the interface
-  //  *
-  //  * @name channels
-  //  * @synonyms ch
-  //  *
-  //  * @param {!Float32Array} channels Array<int>
-  //  * @example
-  //  * note("e a d b g").channels([2, 3]).room(1)
-  //  *
-  //  */
-  // ['channels', 'ch'],
+  /**
+   * Allows you to set the output channels on the interface
+   *
+   * @name channels
+   * @synonyms ch
+   *
+   * @param {number | Pattern} channels pattern the output channels
+   * @example
+   * note("e a d b g").channels("2:3").room(1)
+   *
+   */
+  ['channels', 'ch'],
 
   ['phaserrate', 'phasr'], // superdirt only
 
@@ -1390,13 +1390,13 @@ controls.ds = register('ds', (ds, pat) => {
   return pat.set({ decay, sustain });
 });
 
-controls.ch = register(['channels', 'ch'], (channels, pat) => {
-  channels = !Array.isArray(channels) ? [channels] : channels;
+// controls.ch = register(['channels', 'ch'], (channels, pat) => {
+//   channels = !Array.isArray(channels) ? [channels] : channels;
 
-  // channels = channels.map(reify).map((channelPat) => {
-  //   // How do I return the current value of the channel pattern here?
-  // });
-  return pat.set({ channels });
-});
+//   // channels = channels.map(reify).map((channelPat) => {
+//   //   // How do I return the current value of the channel pattern here?
+//   // });
+//   return pat.set({ channels });
+// });
 
 export default controls;
diff --git a/packages/superdough/superdough.mjs b/packages/superdough/superdough.mjs
index 3cccfc96..4f931304 100644
--- a/packages/superdough/superdough.mjs
+++ b/packages/superdough/superdough.mjs
@@ -23,6 +23,13 @@ export function registerSound(key, onTrigger, data = {}) {
 export function getSound(s) {
   return soundMap.get()[s];
 }
+// sounds with only one active channel will get upmixed to two, stereo sounds should remain unaffected
+// There might be a better way to do this
+export const upMixToStereo = (ctx, node) => {
+  const stereo = new StereoPannerNode(ctx);
+  node.connect(stereo);
+  return stereo;
+};
 
 export const resetLoadedSounds = () => soundMap.set({});
 
@@ -117,14 +124,16 @@ const maxfeedback = 0.98;
 const connectToOutputs = (input, channels = [0, 1]) => {
   const outputs = getDestinations(channels);
   const ctx = getAudioContext();
-  const center = new StereoPannerNode(ctx);
-  input.connect(center);
+
+  //This upmix can be avoided if correct channel counts are set throughout the app,
+  //could theoretically support surround sound audio files if that work was done
+  const stereo = upMixToStereo(ctx, input);
   const splitter = new ChannelSplitterNode(ctx, {
-    numberOfOutputs: input.channelCount,
+    numberOfOutputs: stereo.channelCount,
   });
-  center.connect(splitter);
+  stereo.connect(splitter);
   outputs.forEach((output, i) => {
-    splitter.connect(output, i % input.channelCount, 0);
+    splitter.connect(output, i % stereo.channelCount, 0);
   });
 };
 
@@ -334,6 +343,8 @@ export const superdough = async (value, deadline, hapDuration) => {
     compressorRelease,
   } = value;
 
+  channels = Array.isArray(channels) ? channels : [channels];
+
   gain *= velocity; // legacy fix for velocity
   let toDisconnect = []; // audio nodes that will be disconnected when the source has ended
   const onended = () => {
diff --git a/packages/superdough/synth.mjs b/packages/superdough/synth.mjs
index dafc2e7c..fad67b75 100644
--- a/packages/superdough/synth.mjs
+++ b/packages/superdough/synth.mjs
@@ -71,8 +71,7 @@ export function waveformN(partials, type) {
   const real = new Float32Array(partials + 1);
   const imag = new Float32Array(partials + 1);
   const ac = getAudioContext();
-  const osc = ac.createOscillator();
-
+  const osc = new OscillatorNode(ac, { channelCount: 1, channelCountMode: 'explicit' });
   const terms = {
     sawtooth: (n) => [0, -1 / n],
     square: (n) => [0, n % 2 === 0 ? 0 : 1 / n],
@@ -125,7 +124,8 @@ export function getOscillator(
   let o;
   // If no partials are given, use stock waveforms
   if (!partials || s === 'sine') {
-    o = getAudioContext().createOscillator();
+    o = new OscillatorNode(ac, { channelCount: 1, channelCountMode: 'explicit' });
+    console.log(o);
     o.type = s || 'triangle';
   }
   // generate custom waveform if partials are given
diff --git a/website/src/repl/Footer.jsx b/website/src/repl/Footer.jsx
index b03f62d0..87e42dd7 100644
--- a/website/src/repl/Footer.jsx
+++ b/website/src/repl/Footer.jsx
@@ -7,7 +7,7 @@ import React, { useMemo, useCallback, useLayoutEffect, useRef, useState } from '
 import { Reference } from './Reference';
 import { themes } from './themes.mjs';
 import { useSettings, settingsMap, setActiveFooter, defaultSettings } from '../settings.mjs';
-import { getAudioContext, soundMap } from '@strudel.cycles/webaudio';
+import { getAudioContext, soundMap, upMixToStereo } from '@strudel.cycles/webaudio';
 import { useStore } from '@nanostores/react';
 import { FilesTab } from './FilesTab';
 
@@ -271,7 +271,7 @@ function SoundsTab() {
               const onended = () => trigRef.current?.node?.disconnect();
               trigRef.current = Promise.resolve(onTrigger(time, params, onended));
               trigRef.current.then((ref) => {
-                ref?.node.connect(ctx.destination);
+                upMixToStereo(ctx, ref?.node).connect(ctx.destination);
               });
             }}
           >

From 1f62d85d8b10ab6234169c03469389830983ec3b Mon Sep 17 00:00:00 2001
From: Jade Rowland <jaderowlanddev@gmail.com>
Date: Thu, 23 Nov 2023 13:29:22 -0500
Subject: [PATCH 20/72] cleaning up

---
 packages/superdough/superdough.mjs | 63 ++++++++++--------------------
 website/src/repl/Footer.jsx        |  4 +-
 2 files changed, 22 insertions(+), 45 deletions(-)

diff --git a/packages/superdough/superdough.mjs b/packages/superdough/superdough.mjs
index 4f931304..a1b81edd 100644
--- a/packages/superdough/superdough.mjs
+++ b/packages/superdough/superdough.mjs
@@ -23,13 +23,6 @@ export function registerSound(key, onTrigger, data = {}) {
 export function getSound(s) {
   return soundMap.get()[s];
 }
-// sounds with only one active channel will get upmixed to two, stereo sounds should remain unaffected
-// There might be a better way to do this
-export const upMixToStereo = (ctx, node) => {
-  const stereo = new StereoPannerNode(ctx);
-  node.connect(stereo);
-  return stereo;
-};
 
 export const resetLoadedSounds = () => soundMap.set({});
 
@@ -45,28 +38,6 @@ export const getAudioContext = () => {
 };
 // outputs: Map<int, GainNode>
 const outputs = new Map();
-let channelMerger;
-// channels: Array<int>
-const getDestinations = (channels) => {
-  const ctx = getAudioContext();
-  if (channelMerger == null) {
-    channelMerger = new ChannelMergerNode(ctx, { numberOfInputs: ctx.destination.channelCount });
-    channelMerger.connect(ctx.destination);
-  }
-  channels.forEach((ch) => {
-    if (!outputs.has(ch)) {
-      const gain = new GainNode(ctx, {
-        channelInterpretation: 'discrete',
-        channelCount: 1,
-        channelCountMode: 'explicit',
-      });
-      gain.connect(channelMerger, 0, ch);
-      outputs.set(ch, gain);
-    }
-  });
-
-  return channels.map((ch) => outputs.get(ch));
-};
 
 export const panic = () => {
   outputs.forEach((output) => {
@@ -120,20 +91,26 @@ export async function initAudioOnFirstClick(options) {
 
 let delays = {};
 const maxfeedback = 0.98;
-//input: audioNode, channels: Array<int>
-const connectToOutputs = (input, channels = [0, 1]) => {
-  const outputs = getDestinations(channels);
-  const ctx = getAudioContext();
 
-  //This upmix can be avoided if correct channel counts are set throughout the app,
-  //could theoretically support surround sound audio files if that work was done
-  const stereo = upMixToStereo(ctx, input);
+let channelMerger;
+// input: AudioNode, channels: ?Array<int>
+export const connectToDestination = (input, channels = [0, 1]) => {
+  const ctx = getAudioContext();
+  if (channelMerger == null) {
+    channelMerger = new ChannelMergerNode(ctx, { numberOfInputs: ctx.destination.channelCount });
+    channelMerger.connect(ctx.destination);
+  }
+  //This upmix can be removed if correct channel counts are set throughout the app,
+  // and then strudel could theoretically support surround sound audio files
+  const stereoMix = new StereoPannerNode(ctx);
+  input.connect(stereoMix);
+
   const splitter = new ChannelSplitterNode(ctx, {
-    numberOfOutputs: stereo.channelCount,
+    numberOfOutputs: stereoMix.channelCount,
   });
-  stereo.connect(splitter);
-  outputs.forEach((output, i) => {
-    splitter.connect(output, i % stereo.channelCount, 0);
+  stereoMix.connect(splitter);
+  channels.map((ch, i) => {
+    splitter.connect(channelMerger, i % stereoMix.channelCount, ch);
   });
 };
 
@@ -146,7 +123,7 @@ function getDelay(orbit, delaytime, delayfeedback, t) {
     const ac = getAudioContext();
     const dly = ac.createFeedbackDelay(1, delaytime, delayfeedback);
     dly.start?.(t); // for some reason, this throws when audion extension is installed..
-    connectToOutputs(dly, [0, 1]);
+    connectToDestination(dly, [0, 1]);
     delays[orbit] = dly;
   }
   delays[orbit].delayTime.value !== delaytime && delays[orbit].delayTime.setValueAtTime(delaytime, t);
@@ -205,7 +182,7 @@ function getReverb(orbit, duration, fade, lp, dim, ir) {
   if (!reverbs[orbit]) {
     const ac = getAudioContext();
     const reverb = ac.createReverb(duration, fade, lp, dim, ir);
-    connectToOutputs(reverb, [0, 1]);
+    connectToDestination(reverb, [0, 1]);
     reverbs[orbit] = reverb;
   }
   if (
@@ -480,7 +457,7 @@ export const superdough = async (value, deadline, hapDuration) => {
   // last gain
   const post = new GainNode(ac, { gain: postgain });
   chain.push(post);
-  connectToOutputs(post, channels);
+  connectToDestination(post, channels);
 
   // delay
   let delaySend;
diff --git a/website/src/repl/Footer.jsx b/website/src/repl/Footer.jsx
index 87e42dd7..35625093 100644
--- a/website/src/repl/Footer.jsx
+++ b/website/src/repl/Footer.jsx
@@ -7,7 +7,7 @@ import React, { useMemo, useCallback, useLayoutEffect, useRef, useState } from '
 import { Reference } from './Reference';
 import { themes } from './themes.mjs';
 import { useSettings, settingsMap, setActiveFooter, defaultSettings } from '../settings.mjs';
-import { getAudioContext, soundMap, upMixToStereo } from '@strudel.cycles/webaudio';
+import { getAudioContext, soundMap, connectToDestination } from '@strudel.cycles/webaudio';
 import { useStore } from '@nanostores/react';
 import { FilesTab } from './FilesTab';
 
@@ -271,7 +271,7 @@ function SoundsTab() {
               const onended = () => trigRef.current?.node?.disconnect();
               trigRef.current = Promise.resolve(onTrigger(time, params, onended));
               trigRef.current.then((ref) => {
-                upMixToStereo(ctx, ref?.node).connect(ctx.destination);
+                connectToDestination(ref?.node);
               });
             }}
           >

From 88e933ee2506c4ee948b4f09d8028db1c60416de Mon Sep 17 00:00:00 2001
From: Jade Rowland <jaderowlanddev@gmail.com>
Date: Thu, 23 Nov 2023 13:31:00 -0500
Subject: [PATCH 21/72] cleaning up

---
 packages/core/controls.mjs | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

diff --git a/packages/core/controls.mjs b/packages/core/controls.mjs
index 01b46a9e..31e6ea77 100644
--- a/packages/core/controls.mjs
+++ b/packages/core/controls.mjs
@@ -4,7 +4,7 @@ Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/st
 This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { Pattern, register, reify, sequence } from './pattern.mjs';
+import { Pattern, register, sequence } from './pattern.mjs';
 import { zipWith } from './util.mjs';
 
 const controls = {};
@@ -389,7 +389,7 @@ const generic_params = [
    *
    * @param {number | Pattern} channels pattern the output channels
    * @example
-   * note("e a d b g").channels("2:3").room(1)
+   * note("e a d b g").channels("2:3")
    *
    */
   ['channels', 'ch'],
@@ -1390,13 +1390,4 @@ controls.ds = register('ds', (ds, pat) => {
   return pat.set({ decay, sustain });
 });
 
-// controls.ch = register(['channels', 'ch'], (channels, pat) => {
-//   channels = !Array.isArray(channels) ? [channels] : channels;
-
-//   // channels = channels.map(reify).map((channelPat) => {
-//   //   // How do I return the current value of the channel pattern here?
-//   // });
-//   return pat.set({ channels });
-// });
-
 export default controls;

From 64c2e7c1e8071e1676e9958d4f8f3a7f840f8b37 Mon Sep 17 00:00:00 2001
From: Jade Rowland <jaderowlanddev@gmail.com>
Date: Thu, 23 Nov 2023 13:45:58 -0500
Subject: [PATCH 22/72] cleaning up

---
 packages/superdough/synth.mjs | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/superdough/synth.mjs b/packages/superdough/synth.mjs
index fad67b75..dafc2e7c 100644
--- a/packages/superdough/synth.mjs
+++ b/packages/superdough/synth.mjs
@@ -71,7 +71,8 @@ export function waveformN(partials, type) {
   const real = new Float32Array(partials + 1);
   const imag = new Float32Array(partials + 1);
   const ac = getAudioContext();
-  const osc = new OscillatorNode(ac, { channelCount: 1, channelCountMode: 'explicit' });
+  const osc = ac.createOscillator();
+
   const terms = {
     sawtooth: (n) => [0, -1 / n],
     square: (n) => [0, n % 2 === 0 ? 0 : 1 / n],
@@ -124,8 +125,7 @@ export function getOscillator(
   let o;
   // If no partials are given, use stock waveforms
   if (!partials || s === 'sine') {
-    o = new OscillatorNode(ac, { channelCount: 1, channelCountMode: 'explicit' });
-    console.log(o);
+    o = getAudioContext().createOscillator();
     o.type = s || 'triangle';
   }
   // generate custom waveform if partials are given

From 886b16d6fd906c1a1f917679bed0eb4011e42371 Mon Sep 17 00:00:00 2001
From: Jade Rowland <jaderowlanddev@gmail.com>
Date: Thu, 23 Nov 2023 14:07:32 -0500
Subject: [PATCH 23/72] fixed panic function

---
 packages/superdough/superdough.mjs | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/packages/superdough/superdough.mjs b/packages/superdough/superdough.mjs
index a1b81edd..2eb4a64f 100644
--- a/packages/superdough/superdough.mjs
+++ b/packages/superdough/superdough.mjs
@@ -36,15 +36,6 @@ export const getAudioContext = () => {
   }
   return audioContext;
 };
-// outputs: Map<int, GainNode>
-const outputs = new Map();
-
-export const panic = () => {
-  outputs.forEach((output) => {
-    return output.gain.linearRampToValueAtTime(0, getAudioContext().currentTime + 0.01);
-  });
-  outputs.clear();
-};
 
 let workletsLoading;
 
@@ -92,13 +83,16 @@ export async function initAudioOnFirstClick(options) {
 let delays = {};
 const maxfeedback = 0.98;
 
-let channelMerger;
+let channelMerger, destinationGain;
+
 // input: AudioNode, channels: ?Array<int>
 export const connectToDestination = (input, channels = [0, 1]) => {
   const ctx = getAudioContext();
   if (channelMerger == null) {
     channelMerger = new ChannelMergerNode(ctx, { numberOfInputs: ctx.destination.channelCount });
-    channelMerger.connect(ctx.destination);
+    destinationGain = new GainNode(ctx);
+    channelMerger.connect(destinationGain);
+    destinationGain.connect(ctx.destination);
   }
   //This upmix can be removed if correct channel counts are set throughout the app,
   // and then strudel could theoretically support surround sound audio files
@@ -114,6 +108,11 @@ export const connectToDestination = (input, channels = [0, 1]) => {
   });
 };
 
+export const panic = () => {
+  destinationGain.gain.linearRampToValueAtTime(0, getAudioContext().currentTime + 0.01);
+  destinationGain = null;
+};
+
 function getDelay(orbit, delaytime, delayfeedback, t) {
   if (delayfeedback > maxfeedback) {
     //logger(`delayfeedback was clamped to ${maxfeedback} to save your ears`);

From e7376c4fc8753be908aedcfa81a4ca239abdc3ec Mon Sep 17 00:00:00 2001
From: Jade Rowland <jaderowlanddev@gmail.com>
Date: Thu, 23 Nov 2023 14:17:17 -0500
Subject: [PATCH 24/72] panic function update

---
 packages/superdough/superdough.mjs | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/superdough/superdough.mjs b/packages/superdough/superdough.mjs
index 2eb4a64f..dfea5dc1 100644
--- a/packages/superdough/superdough.mjs
+++ b/packages/superdough/superdough.mjs
@@ -109,6 +109,9 @@ export const connectToDestination = (input, channels = [0, 1]) => {
 };
 
 export const panic = () => {
+  if (destinationGain == null) {
+    return;
+  }
   destinationGain.gain.linearRampToValueAtTime(0, getAudioContext().currentTime + 0.01);
   destinationGain = null;
 };

From 25b2eb5783a09697ed66c096dbdb483fa0549f0a Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Sat, 25 Nov 2023 16:20:12 +0100
Subject: [PATCH 25/72] snapshot

---
 test/__snapshots__/examples.test.mjs.snap | 25 +++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/test/__snapshots__/examples.test.mjs.snap b/test/__snapshots__/examples.test.mjs.snap
index 34f7a850..09a1ecec 100644
--- a/test/__snapshots__/examples.test.mjs.snap
+++ b/test/__snapshots__/examples.test.mjs.snap
@@ -1038,6 +1038,31 @@ exports[`runs examples > example "ceil" example index 0 1`] = `
 ]
 `;
 
+exports[`runs examples > example "channels" example index 0 1`] = `
+[
+  "[ 0/1 → 1/5 | note:e channels:[2 3] ]",
+  "[ 1/5 → 2/5 | note:a channels:[2 3] ]",
+  "[ 2/5 → 3/5 | note:d channels:[2 3] ]",
+  "[ 3/5 → 4/5 | note:b channels:[2 3] ]",
+  "[ 4/5 → 1/1 | note:g channels:[2 3] ]",
+  "[ 1/1 → 6/5 | note:e channels:[2 3] ]",
+  "[ 6/5 → 7/5 | note:a channels:[2 3] ]",
+  "[ 7/5 → 8/5 | note:d channels:[2 3] ]",
+  "[ 8/5 → 9/5 | note:b channels:[2 3] ]",
+  "[ 9/5 → 2/1 | note:g channels:[2 3] ]",
+  "[ 2/1 → 11/5 | note:e channels:[2 3] ]",
+  "[ 11/5 → 12/5 | note:a channels:[2 3] ]",
+  "[ 12/5 → 13/5 | note:d channels:[2 3] ]",
+  "[ 13/5 → 14/5 | note:b channels:[2 3] ]",
+  "[ 14/5 → 3/1 | note:g channels:[2 3] ]",
+  "[ 3/1 → 16/5 | note:e channels:[2 3] ]",
+  "[ 16/5 → 17/5 | note:a channels:[2 3] ]",
+  "[ 17/5 → 18/5 | note:d channels:[2 3] ]",
+  "[ 18/5 → 19/5 | note:b channels:[2 3] ]",
+  "[ 19/5 → 4/1 | note:g channels:[2 3] ]",
+]
+`;
+
 exports[`runs examples > example "chooseCycles" example index 0 1`] = `
 [
   "[ 0/1 → 1/4 | s:bd ]",

From 9aec18b3a0c7cbf86f15b45e0d41cbdf14726fb2 Mon Sep 17 00:00:00 2001
From: Jade Rowland <jaderowlanddev@gmail.com>
Date: Sun, 3 Dec 2023 18:25:30 -0500
Subject: [PATCH 26/72] add 1 to channel selection

---
 packages/core/controls.mjs         | 2 +-
 packages/superdough/superdough.mjs | 9 +++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/core/controls.mjs b/packages/core/controls.mjs
index 6eca59d8..d979ff23 100644
--- a/packages/core/controls.mjs
+++ b/packages/core/controls.mjs
@@ -389,7 +389,7 @@ const generic_params = [
    *
    * @param {number | Pattern} channels pattern the output channels
    * @example
-   * note("e a d b g").channels("2:3")
+   * note("e a d b g").channels("3:4")
    *
    */
   ['channels', 'ch'],
diff --git a/packages/superdough/superdough.mjs b/packages/superdough/superdough.mjs
index 8449c5c7..1291c192 100644
--- a/packages/superdough/superdough.mjs
+++ b/packages/superdough/superdough.mjs
@@ -103,8 +103,8 @@ export const connectToDestination = (input, channels = [0, 1]) => {
     numberOfOutputs: stereoMix.channelCount,
   });
   stereoMix.connect(splitter);
-  channels.map((ch, i) => {
-    splitter.connect(channelMerger, i % stereoMix.channelCount, ch);
+  channels.forEach((ch, i) => {
+    splitter.connect(channelMerger, i % stereoMix.channelCount, clamp(ch, 0, ctx.destination.channelCount - 1));
   });
 };
 
@@ -290,7 +290,7 @@ export const superdough = async (value, deadline, hapDuration) => {
     bpsustain = 1,
     bprelease = 0.01,
     bandq = 1,
-    channels = [0, 1],
+    channels = [1, 2],
     //phaser
     phaser,
     phaserdepth = 0.75,
@@ -323,7 +323,8 @@ export const superdough = async (value, deadline, hapDuration) => {
     compressorRelease,
   } = value;
 
-  channels = Array.isArray(channels) ? channels : [channels];
+  //music programs/audio gear usually labels channels 0,1 as 1,2 so imitate that behavior
+  channels = (Array.isArray(channels) ? channels : [channels]).map((ch) => ch - 1);
 
   gain *= velocity; // legacy fix for velocity
   let toDisconnect = []; // audio nodes that will be disconnected when the source has ended

From f51109cb266dcef35536d84f367789b028cb0118 Mon Sep 17 00:00:00 2001
From: Jade Rowland <jaderowlanddev@gmail.com>
Date: Sun, 3 Dec 2023 18:26:48 -0500
Subject: [PATCH 27/72] comment

---
 packages/superdough/superdough.mjs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/superdough/superdough.mjs b/packages/superdough/superdough.mjs
index 1291c192..2305ab44 100644
--- a/packages/superdough/superdough.mjs
+++ b/packages/superdough/superdough.mjs
@@ -323,7 +323,7 @@ export const superdough = async (value, deadline, hapDuration) => {
     compressorRelease,
   } = value;
 
-  //music programs/audio gear usually labels channels 0,1 as 1,2 so imitate that behavior
+  //music programs/audio gear usually increments inputs/outputs from 1, so imitate that behavior
   channels = (Array.isArray(channels) ? channels : [channels]).map((ch) => ch - 1);
 
   gain *= velocity; // legacy fix for velocity

From 9be10890e1465a936ba3ad2e7d1d7d8a40308cd5 Mon Sep 17 00:00:00 2001
From: Jade Rowland <jaderowlanddev@gmail.com>
Date: Sun, 3 Dec 2023 18:31:01 -0500
Subject: [PATCH 28/72] update tests

---
 test/__snapshots__/examples.test.mjs.snap | 40 +++++++++++------------
 test/__snapshots__/tunes.test.mjs.snap    |  4 +--
 2 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/test/__snapshots__/examples.test.mjs.snap b/test/__snapshots__/examples.test.mjs.snap
index 09a1ecec..bd5e9cb9 100644
--- a/test/__snapshots__/examples.test.mjs.snap
+++ b/test/__snapshots__/examples.test.mjs.snap
@@ -1040,26 +1040,26 @@ exports[`runs examples > example "ceil" example index 0 1`] = `
 
 exports[`runs examples > example "channels" example index 0 1`] = `
 [
-  "[ 0/1 → 1/5 | note:e channels:[2 3] ]",
-  "[ 1/5 → 2/5 | note:a channels:[2 3] ]",
-  "[ 2/5 → 3/5 | note:d channels:[2 3] ]",
-  "[ 3/5 → 4/5 | note:b channels:[2 3] ]",
-  "[ 4/5 → 1/1 | note:g channels:[2 3] ]",
-  "[ 1/1 → 6/5 | note:e channels:[2 3] ]",
-  "[ 6/5 → 7/5 | note:a channels:[2 3] ]",
-  "[ 7/5 → 8/5 | note:d channels:[2 3] ]",
-  "[ 8/5 → 9/5 | note:b channels:[2 3] ]",
-  "[ 9/5 → 2/1 | note:g channels:[2 3] ]",
-  "[ 2/1 → 11/5 | note:e channels:[2 3] ]",
-  "[ 11/5 → 12/5 | note:a channels:[2 3] ]",
-  "[ 12/5 → 13/5 | note:d channels:[2 3] ]",
-  "[ 13/5 → 14/5 | note:b channels:[2 3] ]",
-  "[ 14/5 → 3/1 | note:g channels:[2 3] ]",
-  "[ 3/1 → 16/5 | note:e channels:[2 3] ]",
-  "[ 16/5 → 17/5 | note:a channels:[2 3] ]",
-  "[ 17/5 → 18/5 | note:d channels:[2 3] ]",
-  "[ 18/5 → 19/5 | note:b channels:[2 3] ]",
-  "[ 19/5 → 4/1 | note:g channels:[2 3] ]",
+  "[ 0/1 → 1/5 | note:e channels:[3 4] ]",
+  "[ 1/5 → 2/5 | note:a channels:[3 4] ]",
+  "[ 2/5 → 3/5 | note:d channels:[3 4] ]",
+  "[ 3/5 → 4/5 | note:b channels:[3 4] ]",
+  "[ 4/5 → 1/1 | note:g channels:[3 4] ]",
+  "[ 1/1 → 6/5 | note:e channels:[3 4] ]",
+  "[ 6/5 → 7/5 | note:a channels:[3 4] ]",
+  "[ 7/5 → 8/5 | note:d channels:[3 4] ]",
+  "[ 8/5 → 9/5 | note:b channels:[3 4] ]",
+  "[ 9/5 → 2/1 | note:g channels:[3 4] ]",
+  "[ 2/1 → 11/5 | note:e channels:[3 4] ]",
+  "[ 11/5 → 12/5 | note:a channels:[3 4] ]",
+  "[ 12/5 → 13/5 | note:d channels:[3 4] ]",
+  "[ 13/5 → 14/5 | note:b channels:[3 4] ]",
+  "[ 14/5 → 3/1 | note:g channels:[3 4] ]",
+  "[ 3/1 → 16/5 | note:e channels:[3 4] ]",
+  "[ 16/5 → 17/5 | note:a channels:[3 4] ]",
+  "[ 17/5 → 18/5 | note:d channels:[3 4] ]",
+  "[ 18/5 → 19/5 | note:b channels:[3 4] ]",
+  "[ 19/5 → 4/1 | note:g channels:[3 4] ]",
 ]
 `;
 
diff --git a/test/__snapshots__/tunes.test.mjs.snap b/test/__snapshots__/tunes.test.mjs.snap
index 8d696d75..79fb2690 100644
--- a/test/__snapshots__/tunes.test.mjs.snap
+++ b/test/__snapshots__/tunes.test.mjs.snap
@@ -7831,8 +7831,8 @@ exports[`renders tunes > tune: hyperpop 1`] = `
   "[ 3/2 ⇜ (11/6 → 15/8) | note:C#5 s:sawtooth gain:0.3422847385870941 attack:0.001 decay:0.2 sustain:0 hcutoff:5845.47833980621 cutoff:4000 ]",
   "[ 15/8 → 2/1 | note:D3 s:sawtooth gain:0.3 attack:0.01 decay:0.1 sustain:0.5 cutoff:2151.2782118349805 lpattack:0.1 lpenv:2 ftype:24db ]",
   "[ 15/8 → 2/1 | note:D3 s:square gain:0.3 attack:0.01 decay:0.1 sustain:0.5 cutoff:2151.2782118349805 lpattack:0.1 lpenv:2 ftype:24db ]",
-  "[ (15/8 → 2/1) ⇝ 9/4 | note:A5 s:sawtooth gain:0.35343108171056004 attack:0.001 decay:0.2 sustain:0 hcutoff:5796.978025372246 cutoff:4000 ]",
-  "[ (15/8 → 2/1) ⇝ 9/4 | note:C#5 s:sawtooth gain:0.35343108171056004 attack:0.001 decay:0.2 sustain:0 hcutoff:5796.978025372246 cutoff:4000 ]",
+  "[ (15/8 → 2/1) ⇝ 9/4 | note:A5 s:sawtooth gain:0.35343108171056015 attack:0.001 decay:0.2 sustain:0 hcutoff:5796.978025372246 cutoff:4000 ]",
+  "[ (15/8 → 2/1) ⇝ 9/4 | note:C#5 s:sawtooth gain:0.35343108171056015 attack:0.001 decay:0.2 sustain:0 hcutoff:5796.978025372246 cutoff:4000 ]",
   "[ (15/8 → 2/1) ⇝ 19/8 | note:F#3 s:square gain:0.7 attack:0.01 decay:0.1 sustain:0 cutoff:2151.2782118349805 ]",
   "[ (15/8 → 2/1) ⇝ 19/8 | note:A3 s:square gain:0.7 attack:0.01 decay:0.1 sustain:0 cutoff:2151.2782118349805 ]",
   "[ 13/8 ⇜ (23/12 → 2/1) | note:F#5 s:sawtooth gain:0.3479759264430665 attack:0.001 decay:0.2 sustain:0 hcutoff:5822.02388217981 cutoff:4000 ]",

From 7c948dd8129d7ce9a5d27880139ac058897f758b Mon Sep 17 00:00:00 2001
From: "Alexandre G.-Raymond" <alex@ndre.gr>
Date: Mon, 4 Dec 2023 14:48:54 +0100
Subject: [PATCH 29/72] Prevent 404 on Algolia crawls

---
 website/src/pages/learn/csound.mdx           | 2 +-
 website/src/pages/learn/getting-started.mdx  | 2 +-
 website/src/pages/learn/sounds.mdx           | 2 +-
 website/src/pages/learn/strudel-vs-tidal.mdx | 4 ++--
 website/src/pages/learn/time-modifiers.mdx   | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/website/src/pages/learn/csound.mdx b/website/src/pages/learn/csound.mdx
index 8f854c21..4ef04419 100644
--- a/website/src/pages/learn/csound.mdx
+++ b/website/src/pages/learn/csound.mdx
@@ -145,7 +145,7 @@ In both cases, p4 is derived from the value of `freq` or `note`.
 ## Limitations / Future Plans
 
 Apart from the above listed p values, no other parameter can be patterned so far.
-This also means that [audio effects](./learn/effects) will not work.
+This also means that [audio effects](/learn/effects/) will not work.
 In the future, the integration could be improved by passing all patterned control parameters to the csound instrument.
 This could work by a unique [channel](https://kunstmusik.github.io/icsc2022-csound-web/tutorial2-interacting-with-csound/#step-4---writing-continuous-data-channels)
 for each value. Channels could be read [like this](https://github.com/csound/csound/blob/master/Android/CsoundForAndroid/CsoundAndroidExamples/src/main/res/raw/multitouch_xy.csd).
diff --git a/website/src/pages/learn/getting-started.mdx b/website/src/pages/learn/getting-started.mdx
index 29cd6b7d..0fb750c1 100644
--- a/website/src/pages/learn/getting-started.mdx
+++ b/website/src/pages/learn/getting-started.mdx
@@ -41,7 +41,7 @@ This interactive tutorial will guide you through the basics of Strudel.
 To see and hear what Strudel can do, visit the [Strudel REPL](https://strudel.cc/) and click the Shuffle icon in the top menu bar.
 You can get a feel for Strudel by browsing and editing these examples and clicking the Refresh icon to update.
 
-You can also browse through the examples [here](./examples).
+You can also browse through the examples [here](/examples).
 
 Alternatively, you can get a taste of what Strudel can do by clicking play on this track:
 
diff --git a/website/src/pages/learn/sounds.mdx b/website/src/pages/learn/sounds.mdx
index a17c2d0c..a9fd547c 100644
--- a/website/src/pages/learn/sounds.mdx
+++ b/website/src/pages/learn/sounds.mdx
@@ -19,7 +19,7 @@ You can learn more about both of these approaches in the pages [Synths](/learn/s
 
 # Combining notes and sounds
 
-In both of the above cases, we are no longer directly controlling the `note`/`freq` of the sound heard via `s`, as we were in the [Notes](/strudel/notes) page.
+In both of the above cases, we are no longer directly controlling the `note`/`freq` of the sound heard via `s`, as we were in the [Notes](/workshop/first-notes/) page.
 
 So how can we both control the sound and the pitch? We can _combine_ `note`/`freq` with `s` to change the sound of our pitches:
 
diff --git a/website/src/pages/learn/strudel-vs-tidal.mdx b/website/src/pages/learn/strudel-vs-tidal.mdx
index 60f24149..0c7213c7 100644
--- a/website/src/pages/learn/strudel-vs-tidal.mdx
+++ b/website/src/pages/learn/strudel-vs-tidal.mdx
@@ -96,13 +96,13 @@ If you find a tidal control that's not on the list, please tell!
 ## Sound
 
 Tidal is commonly paired with Superdirt / Supercollider for sound generation.
-While Strudel also has a way of [communicating with Superdirt](./learn/input-output),
+While Strudel also has a way of [communicating with Superdirt](/learn/input-output/),
 it aims to provide a standalone live coding environment that runs entirely in the browser.
 
 ### Audio Effects
 
 Many of SuperDirt's effects have been reimplemented in Strudel, using the Web Audio API.
-You can find a [list of available effects here](./learn/effects).
+You can find a [list of available effects here](/learn/effects/).
 
 ### Sampler
 
diff --git a/website/src/pages/learn/time-modifiers.mdx b/website/src/pages/learn/time-modifiers.mdx
index 217a7851..e1226512 100644
--- a/website/src/pages/learn/time-modifiers.mdx
+++ b/website/src/pages/learn/time-modifiers.mdx
@@ -110,4 +110,4 @@ Some of these have equivalent operators in the Mini Notation:
 
 <JsDoc client:idle name="ribbon" h={0} />
 
-Apart from modifying time, there are ways to [Control Parameters](functions/value-modifiers).
+Apart from modifying time, there are ways to [Control Parameters](/functions/value-modifiers/).

From 1bca05e3497c1062fc1eaf0b350672b8134b23e2 Mon Sep 17 00:00:00 2001
From: Bernhard Wagner <github.comNotification20120125@xmlizer.net>
Date: Tue, 5 Dec 2023 11:15:13 +0100
Subject: [PATCH 30/72] FIXES: palindrome abc -> abccba (#831)

* FIXES: palindrome abc -> abccba

* FIXES: tests for palindrome

---------

Co-authored-by: Bernhard Wagner <gitcommit@nosuch.biz>
---
 packages/core/pattern.mjs                 |  2 +-
 packages/core/test/pattern.test.mjs       | 13 +++++++++
 test/__snapshots__/examples.test.mjs.snap | 32 +++++++++++------------
 test/__snapshots__/tunes.test.mjs.snap    | 20 +++++++-------
 4 files changed, 40 insertions(+), 27 deletions(-)

diff --git a/packages/core/pattern.mjs b/packages/core/pattern.mjs
index 9a5c456a..f6969a73 100644
--- a/packages/core/pattern.mjs
+++ b/packages/core/pattern.mjs
@@ -1985,7 +1985,7 @@ Pattern.prototype.hush = function () {
  * note("c d e g").palindrome()
  */
 export const palindrome = register('palindrome', function (pat) {
-  return pat.every(2, rev);
+  return pat.lastOf(2, rev);
 });
 
 /**
diff --git a/packages/core/test/pattern.test.mjs b/packages/core/test/pattern.test.mjs
index f4a03110..1c849499 100644
--- a/packages/core/test/pattern.test.mjs
+++ b/packages/core/test/pattern.test.mjs
@@ -20,6 +20,7 @@ import {
   slowcat,
   cat,
   sequence,
+  palindrome,
   polymeter,
   polymeterSteps,
   polyrhythm,
@@ -571,6 +572,18 @@ describe('Pattern', () => {
       expect(sequence(1, 2, 3).firstCycle()).toStrictEqual(fastcat(1, 2, 3).firstCycle());
     });
   });
+  describe('palindrome()', () => {
+    it('Can create palindrome', () => {
+      expect(
+        fastcat('a', 'b', 'c')
+          .palindrome()
+          .fast(2)
+          .firstCycle()
+          .sort((a, b) => a.part.begin.sub(b.part.begin))
+          .map((a) => a.value),
+      ).toStrictEqual(['a', 'b', 'c', 'c', 'b', 'a']);
+    });
+  });
   describe('polyrhythm()', () => {
     it('Can layer up cycles', () => {
       expect(polyrhythm(['a', 'b'], ['c']).firstCycle()).toStrictEqual(
diff --git a/test/__snapshots__/examples.test.mjs.snap b/test/__snapshots__/examples.test.mjs.snap
index 34f7a850..721c7342 100644
--- a/test/__snapshots__/examples.test.mjs.snap
+++ b/test/__snapshots__/examples.test.mjs.snap
@@ -3267,22 +3267,22 @@ exports[`runs examples > example "outside" example index 0 1`] = `
 
 exports[`runs examples > example "palindrome" example index 0 1`] = `
 [
-  "[ 0/1 → 1/4 | note:g ]",
-  "[ 1/4 → 1/2 | note:e ]",
-  "[ 1/2 → 3/4 | note:d ]",
-  "[ 3/4 → 1/1 | note:c ]",
-  "[ 1/1 → 5/4 | note:c ]",
-  "[ 5/4 → 3/2 | note:d ]",
-  "[ 3/2 → 7/4 | note:e ]",
-  "[ 7/4 → 2/1 | note:g ]",
-  "[ 2/1 → 9/4 | note:g ]",
-  "[ 9/4 → 5/2 | note:e ]",
-  "[ 5/2 → 11/4 | note:d ]",
-  "[ 11/4 → 3/1 | note:c ]",
-  "[ 3/1 → 13/4 | note:c ]",
-  "[ 13/4 → 7/2 | note:d ]",
-  "[ 7/2 → 15/4 | note:e ]",
-  "[ 15/4 → 4/1 | note:g ]",
+  "[ 0/1 → 1/4 | note:c ]",
+  "[ 1/4 → 1/2 | note:d ]",
+  "[ 1/2 → 3/4 | note:e ]",
+  "[ 3/4 → 1/1 | note:g ]",
+  "[ 1/1 → 5/4 | note:g ]",
+  "[ 5/4 → 3/2 | note:e ]",
+  "[ 3/2 → 7/4 | note:d ]",
+  "[ 7/4 → 2/1 | note:c ]",
+  "[ 2/1 → 9/4 | note:c ]",
+  "[ 9/4 → 5/2 | note:d ]",
+  "[ 5/2 → 11/4 | note:e ]",
+  "[ 11/4 → 3/1 | note:g ]",
+  "[ 3/1 → 13/4 | note:g ]",
+  "[ 13/4 → 7/2 | note:e ]",
+  "[ 7/2 → 15/4 | note:d ]",
+  "[ 15/4 → 4/1 | note:c ]",
 ]
 `;
 
diff --git a/test/__snapshots__/tunes.test.mjs.snap b/test/__snapshots__/tunes.test.mjs.snap
index 8d696d75..0a341d12 100644
--- a/test/__snapshots__/tunes.test.mjs.snap
+++ b/test/__snapshots__/tunes.test.mjs.snap
@@ -8372,16 +8372,16 @@ exports[`renders tunes > tune: hyperpop 1`] = `
 
 exports[`renders tunes > tune: juxUndTollerei 1`] = `
 [
-  "[ 0/1 → 1/4 | note:bb3 s:sawtooth pan:0 cutoff:1188.2154262966046 lpattack:0.2 lpenv:-2 decay:0.05 sustain:0 room:0.6 delay:0.5 delaytime:0.1 delayfeedback:0.4 ]",
-  "[ 0/1 → 1/4 | note:c3 s:sawtooth pan:1 cutoff:1188.2154262966046 lpattack:0.2 lpenv:-2 decay:0.05 sustain:0 room:0.6 delay:0.5 delaytime:0.1 delayfeedback:0.4 ]",
-  "[ 1/4 → 1/2 | note:g3 s:sawtooth pan:0 cutoff:1361.2562095290161 lpattack:0.2 lpenv:-2 decay:0.05 sustain:0 room:0.6 delay:0.5 delaytime:0.1 delayfeedback:0.4 ]",
-  "[ 1/4 → 1/2 | note:eb3 s:sawtooth pan:1 cutoff:1361.2562095290161 lpattack:0.2 lpenv:-2 decay:0.05 sustain:0 room:0.6 delay:0.5 delaytime:0.1 delayfeedback:0.4 ]",
-  "[ 1/2 → 3/4 | note:eb3 s:sawtooth pan:0 cutoff:1524.257063143398 lpattack:0.2 lpenv:-2 decay:0.05 sustain:0 room:0.6 delay:0.5 delaytime:0.1 delayfeedback:0.4 ]",
-  "[ 1/2 → 3/4 | note:g3 s:sawtooth pan:1 cutoff:1524.257063143398 lpattack:0.2 lpenv:-2 decay:0.05 sustain:0 room:0.6 delay:0.5 delaytime:0.1 delayfeedback:0.4 ]",
-  "[ (101/200 → 1/1) ⇝ 201/200 | note:65 s:triangle pan:0 cutoff:1601.4815730092653 lpattack:0.2 lpenv:-2 decay:0.05 sustain:0 room:0.6 delay:0.5 delaytime:0.1 delayfeedback:0.4 ]",
-  "[ (101/200 → 1/1) ⇝ 201/200 | note:55 s:triangle pan:1 cutoff:1601.4815730092653 lpattack:0.2 lpenv:-2 decay:0.05 sustain:0 room:0.6 delay:0.5 delaytime:0.1 delayfeedback:0.4 ]",
-  "[ 3/4 → 1/1 | note:c3 s:sawtooth pan:0 cutoff:1670.953955747281 lpattack:0.2 lpenv:-2 decay:0.05 sustain:0 room:0.6 delay:0.5 delaytime:0.1 delayfeedback:0.4 ]",
-  "[ 3/4 → 1/1 | note:bb3 s:sawtooth pan:1 cutoff:1670.953955747281 lpattack:0.2 lpenv:-2 decay:0.05 sustain:0 room:0.6 delay:0.5 delaytime:0.1 delayfeedback:0.4 ]",
+  "[ 0/1 → 1/4 | note:c3 s:sawtooth pan:0 cutoff:1188.2154262966046 lpattack:0.2 lpenv:-2 decay:0.05 sustain:0 room:0.6 delay:0.5 delaytime:0.1 delayfeedback:0.4 ]",
+  "[ 0/1 → 1/4 | note:bb3 s:sawtooth pan:1 cutoff:1188.2154262966046 lpattack:0.2 lpenv:-2 decay:0.05 sustain:0 room:0.6 delay:0.5 delaytime:0.1 delayfeedback:0.4 ]",
+  "[ 1/4 → 1/2 | note:eb3 s:sawtooth pan:0 cutoff:1361.2562095290161 lpattack:0.2 lpenv:-2 decay:0.05 sustain:0 room:0.6 delay:0.5 delaytime:0.1 delayfeedback:0.4 ]",
+  "[ 1/4 → 1/2 | note:g3 s:sawtooth pan:1 cutoff:1361.2562095290161 lpattack:0.2 lpenv:-2 decay:0.05 sustain:0 room:0.6 delay:0.5 delaytime:0.1 delayfeedback:0.4 ]",
+  "[ 1/2 → 3/4 | note:g3 s:sawtooth pan:0 cutoff:1524.257063143398 lpattack:0.2 lpenv:-2 decay:0.05 sustain:0 room:0.6 delay:0.5 delaytime:0.1 delayfeedback:0.4 ]",
+  "[ 1/2 → 3/4 | note:eb3 s:sawtooth pan:1 cutoff:1524.257063143398 lpattack:0.2 lpenv:-2 decay:0.05 sustain:0 room:0.6 delay:0.5 delaytime:0.1 delayfeedback:0.4 ]",
+  "[ (101/200 → 1/1) ⇝ 201/200 | note:55 s:triangle pan:0 cutoff:1601.4815730092653 lpattack:0.2 lpenv:-2 decay:0.05 sustain:0 room:0.6 delay:0.5 delaytime:0.1 delayfeedback:0.4 ]",
+  "[ (101/200 → 1/1) ⇝ 201/200 | note:65 s:triangle pan:1 cutoff:1601.4815730092653 lpattack:0.2 lpenv:-2 decay:0.05 sustain:0 room:0.6 delay:0.5 delaytime:0.1 delayfeedback:0.4 ]",
+  "[ 3/4 → 1/1 | note:bb3 s:sawtooth pan:0 cutoff:1670.953955747281 lpattack:0.2 lpenv:-2 decay:0.05 sustain:0 room:0.6 delay:0.5 delaytime:0.1 delayfeedback:0.4 ]",
+  "[ 3/4 → 1/1 | note:c3 s:sawtooth pan:1 cutoff:1670.953955747281 lpattack:0.2 lpenv:-2 decay:0.05 sustain:0 room:0.6 delay:0.5 delaytime:0.1 delayfeedback:0.4 ]",
 ]
 `;
 

From 2ce8576ab256c07272e38777f341f120eac2a410 Mon Sep 17 00:00:00 2001
From: Bernhard Wagner <github.comNotification20120125@xmlizer.net>
Date: Tue, 5 Dec 2023 12:19:06 +0100
Subject: [PATCH 31/72] CHANGES: github action checkout v2->v4 (#837)

Co-authored-by: Bernhard Wagner <gitcommit@nosuch.biz>
---
 .github/workflows/deploy.yml | 2 +-
 .github/workflows/test.yml   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 62e91d36..51240974 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -21,7 +21,7 @@ jobs:
       name: github-pages
       url: ${{ steps.deployment.outputs.page_url }}
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v2
         with:
           version: 7
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 849db7d3..c35e7241 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -10,7 +10,7 @@ jobs:
         node-version: [18]
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v2
         with:
           version: 7

From b8866cf57586157a91f507bc5af1967ea69fb889 Mon Sep 17 00:00:00 2001
From: Bernhard Wagner <github.comNotification20120125@xmlizer.net>
Date: Tue, 5 Dec 2023 12:19:17 +0100
Subject: [PATCH 32/72] CHANGES: pin pnpm to version 8.3.1 (#834)

Co-authored-by: Bernhard Wagner <gitcommit@nosuch.biz>
---
 CONTRIBUTING.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 467a9391..1826b12a 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -66,7 +66,8 @@ To get the project up and running for development, make sure you have installed:
 
 - [git](https://git-scm.com/)
 - [node](https://nodejs.org/en/) >= 18
-- [pnpm](https://pnpm.io/) (`npm i pnpm -g`)
+- [pnpm](https://pnpm.io/) (`curl -fsSL https://get.pnpm.io/install.sh | env PNPM_VERSION=8.3.1 sh -`)
+  tests failed to work correctly with newer pnpm versions, so we pin 8.3.1 for now. (see issue #833)
 
 then, do the following:
 

From fe8debe6e8888a0e5f7d30850e63a869174f48d6 Mon Sep 17 00:00:00 2001
From: Bernhard Wagner <github.comNotification20120125@xmlizer.net>
Date: Tue, 5 Dec 2023 12:19:26 +0100
Subject: [PATCH 33/72] CHANGES: github action pnpm version from 7 to 8.3.1
 (#835)

Co-authored-by: Bernhard Wagner <gitcommit@nosuch.biz>
---
 .github/workflows/deploy.yml | 2 +-
 .github/workflows/test.yml   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 51240974..2279b20f 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -24,7 +24,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v2
         with:
-          version: 7
+          version: 8.3.1
       - uses: actions/setup-node@v3
         with:
           node-version: 18
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index c35e7241..f53600e9 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -13,7 +13,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v2
         with:
-          version: 7
+          version: 8.3.1
       - uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}

From ebf93c06dda0543c88782eeb0003f4e5ba34e026 Mon Sep 17 00:00:00 2001
From: Bernhard Wagner <github.comNotification20120125@xmlizer.net>
Date: Tue, 5 Dec 2023 12:19:57 +0100
Subject: [PATCH 34/72] ADDS: JetBrains IDE files (#840)

Co-authored-by: Bernhard Wagner <gitcommit@nosuch.biz>
---
 .gitignore | 85 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 84 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index fe7f9e56..b7704c61 100644
--- a/.gitignore
+++ b/.gitignore
@@ -43,4 +43,87 @@ dev-dist
 Dirt-Samples
 tidal-drum-machines
 webaudiofontdata
-src-tauri/target
\ No newline at end of file
+src-tauri/target
+
+# BEGIN JetBrains -> END JetBrains
+
+# for JetBrains IDE users, e.g. WebStorm. Source: https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
+# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider
+# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
+
+# User-specific stuff
+.idea/**/workspace.xml
+.idea/**/tasks.xml
+.idea/**/usage.statistics.xml
+.idea/**/dictionaries
+.idea/**/shelf
+
+# AWS User-specific
+.idea/**/aws.xml
+
+# Generated files
+.idea/**/contentModel.xml
+
+# Sensitive or high-churn files
+.idea/**/dataSources/
+.idea/**/dataSources.ids
+.idea/**/dataSources.local.xml
+.idea/**/sqlDataSources.xml
+.idea/**/dynamic.xml
+.idea/**/uiDesigner.xml
+.idea/**/dbnavigator.xml
+
+# Gradle
+.idea/**/gradle.xml
+.idea/**/libraries
+
+# Gradle and Maven with auto-import
+# When using Gradle or Maven with auto-import, you should exclude module files,
+# since they will be recreated, and may cause churn.  Uncomment if using
+# auto-import.
+# .idea/artifacts
+# .idea/compiler.xml
+# .idea/jarRepositories.xml
+# .idea/modules.xml
+# .idea/*.iml
+# .idea/modules
+# *.iml
+# *.ipr
+
+# CMake
+cmake-build-*/
+
+# Mongo Explorer plugin
+.idea/**/mongoSettings.xml
+
+# File-based project format
+*.iws
+
+# IntelliJ
+out/
+
+# mpeltonen/sbt-idea plugin
+.idea_modules/
+
+# JIRA plugin
+atlassian-ide-plugin.xml
+
+# Cursive Clojure plugin
+.idea/replstate.xml
+
+# SonarLint plugin
+.idea/sonarlint/
+
+# Crashlytics plugin (for Android Studio and IntelliJ)
+com_crashlytics_export_strings.xml
+crashlytics.properties
+crashlytics-build.properties
+fabric.properties
+
+# Editor-based Rest Client
+.idea/httpRequests
+
+# Android studio 3.1+ serialized cache file
+.idea/caches/build_file_checksums.ser
+
+# END JetBrains -> BEGIN JetBrains

From 1190f6e0910ca1235ed6b969d0d0fe1bf80691ce Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Tue, 5 Dec 2023 18:17:33 +0100
Subject: [PATCH 35/72] fix weird rounding change...

---
 test/__snapshots__/tunes.test.mjs.snap | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/__snapshots__/tunes.test.mjs.snap b/test/__snapshots__/tunes.test.mjs.snap
index 79fb2690..8d696d75 100644
--- a/test/__snapshots__/tunes.test.mjs.snap
+++ b/test/__snapshots__/tunes.test.mjs.snap
@@ -7831,8 +7831,8 @@ exports[`renders tunes > tune: hyperpop 1`] = `
   "[ 3/2 ⇜ (11/6 → 15/8) | note:C#5 s:sawtooth gain:0.3422847385870941 attack:0.001 decay:0.2 sustain:0 hcutoff:5845.47833980621 cutoff:4000 ]",
   "[ 15/8 → 2/1 | note:D3 s:sawtooth gain:0.3 attack:0.01 decay:0.1 sustain:0.5 cutoff:2151.2782118349805 lpattack:0.1 lpenv:2 ftype:24db ]",
   "[ 15/8 → 2/1 | note:D3 s:square gain:0.3 attack:0.01 decay:0.1 sustain:0.5 cutoff:2151.2782118349805 lpattack:0.1 lpenv:2 ftype:24db ]",
-  "[ (15/8 → 2/1) ⇝ 9/4 | note:A5 s:sawtooth gain:0.35343108171056015 attack:0.001 decay:0.2 sustain:0 hcutoff:5796.978025372246 cutoff:4000 ]",
-  "[ (15/8 → 2/1) ⇝ 9/4 | note:C#5 s:sawtooth gain:0.35343108171056015 attack:0.001 decay:0.2 sustain:0 hcutoff:5796.978025372246 cutoff:4000 ]",
+  "[ (15/8 → 2/1) ⇝ 9/4 | note:A5 s:sawtooth gain:0.35343108171056004 attack:0.001 decay:0.2 sustain:0 hcutoff:5796.978025372246 cutoff:4000 ]",
+  "[ (15/8 → 2/1) ⇝ 9/4 | note:C#5 s:sawtooth gain:0.35343108171056004 attack:0.001 decay:0.2 sustain:0 hcutoff:5796.978025372246 cutoff:4000 ]",
   "[ (15/8 → 2/1) ⇝ 19/8 | note:F#3 s:square gain:0.7 attack:0.01 decay:0.1 sustain:0 cutoff:2151.2782118349805 ]",
   "[ (15/8 → 2/1) ⇝ 19/8 | note:A3 s:square gain:0.7 attack:0.01 decay:0.1 sustain:0 cutoff:2151.2782118349805 ]",
   "[ 13/8 ⇜ (23/12 → 2/1) | note:F#5 s:sawtooth gain:0.3479759264430665 attack:0.001 decay:0.2 sustain:0 hcutoff:5822.02388217981 cutoff:4000 ]",

From ac41426a20cf646a0d0f915b993330e54bbddd80 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Tue, 5 Dec 2023 23:09:34 +0100
Subject: [PATCH 36/72] improve slashing + base href behavior + prefix sidebar
 links & mdx links with base + add trailing slashes

---
 website/astro.config.mjs                           | 14 +++++++++-----
 .../src/components/LeftSidebar/LeftSidebar.astro   |  3 ++-
 .../components/RightSidebar/TableOfContents.tsx    |  2 +-
 website/src/repl/Header.jsx                        |  4 +++-
 4 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/website/astro.config.mjs b/website/astro.config.mjs
index f8fceaf7..84a89b33 100644
--- a/website/astro.config.mjs
+++ b/website/astro.config.mjs
@@ -13,6 +13,7 @@ import AstroPWA from '@vite-pwa/astro';
 
 const site = `https://strudel.cc/`; // root url without a path
 const base = '/'; // base path of the strudel site
+const baseNoTrailing = base.endsWith('/') ? base.slice(0, -1) : base;
 
 // this rehype plugin converts relative anchor links to absolute ones
 // it wokrs by prepending the absolute page path to anchor links
@@ -24,13 +25,16 @@ function absoluteAnchors() {
     const chunks = file.history[0].split('/src/pages/'); // file.history[0] is the file path
     const path = chunks[chunks.length - 1].slice(0, -4); // only path inside src/pages, without .mdx
     return rehypeUrls((url) => {
-      if (!url.href.startsWith('#')) {
-        return;
+      if (url.href.startsWith('/')) {
+        const hrefWithTrailingSlash = url.href.endsWith('/') ? url.href : url.href + '/';
+        return baseNoTrailing + hrefWithTrailingSlash;
+      }
+      if (url.href.startsWith('#')) {
+        const absoluteUrl = `${baseNoTrailing}/${path}/${url.href}`;
+        return absoluteUrl;
       }
-      const baseWithSlash = base.endsWith('/') ? base : base + '/';
-      const absoluteUrl = baseWithSlash + path + url.href;
       // console.log(url.href + ' -> ', absoluteUrl);
-      return absoluteUrl;
+      return;
     })(tree);
   };
 }
diff --git a/website/src/components/LeftSidebar/LeftSidebar.astro b/website/src/components/LeftSidebar/LeftSidebar.astro
index b3f69a7e..8b823db6 100644
--- a/website/src/components/LeftSidebar/LeftSidebar.astro
+++ b/website/src/components/LeftSidebar/LeftSidebar.astro
@@ -9,6 +9,7 @@ type Props = {
 const { currentPage } = Astro.props as Props;
 const { BASE_URL } = import.meta.env;
 let currentPageMatch = currentPage.slice(BASE_URL.length, currentPage.endsWith('/') ? -1 : undefined);
+const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
 
 const langCode = getLanguageFromURL(currentPage) || 'en';
 const sidebar = SIDEBAR[langCode];
@@ -23,7 +24,7 @@ const sidebar = SIDEBAR[langCode];
             <h2>{header}</h2>
             <ul>
               {children.map((child) => {
-                const url = Astro.site?.pathname + child.link;
+                const url = `${baseNoTrailing}/${child.link}${child.link.endsWith('/') ? '' : '/'}`;
                 return (
                   <li class="">
                     <a
diff --git a/website/src/components/RightSidebar/TableOfContents.tsx b/website/src/components/RightSidebar/TableOfContents.tsx
index 7ad31ceb..1897d43e 100644
--- a/website/src/components/RightSidebar/TableOfContents.tsx
+++ b/website/src/components/RightSidebar/TableOfContents.tsx
@@ -73,7 +73,7 @@ const TableOfContents: FC<{ headings: MarkdownHeading[]; currentPage: string }>
           .map((heading, i) => (
             <li className={`w-full`} key={i}>
               <a
-                href={`${currentPage}#${heading.slug}`}
+                href={`${currentPage}/#${heading.slug}`}
                 onClick={onLinkClick}
                 className={`py-0.5 block cursor-pointer w-full border-l-4 border-lineHighlight hover:bg-lineHighlight ${
                   ['pl-4', 'pl-9', 'pl-12'][heading.depth - minDepth]
diff --git a/website/src/repl/Header.jsx b/website/src/repl/Header.jsx
index c78e3327..5e991f8a 100644
--- a/website/src/repl/Header.jsx
+++ b/website/src/repl/Header.jsx
@@ -9,6 +9,8 @@ import React, { useContext } from 'react';
 import { useSettings, setIsZen } from '../settings.mjs';
 // import { ReplContext } from './Repl';
 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 }) {
   const {
@@ -123,7 +125,7 @@ export function Header({ context }) {
           {!isEmbedded && (
             <a
               title="learn"
-              href="./workshop/getting-started"
+              href={`${baseNoTrailing}/workshop/getting-started/`}
               className={cx('hover:opacity-50 flex items-center space-x-1', !isEmbedded ? 'p-2' : 'px-2')}
             >
               <AcademicCapIcon className="w-6 h-6" />

From 3e5664a877ed0239d11a44844f201ce133c21351 Mon Sep 17 00:00:00 2001
From: Priere <44214460+shiyouganai@users.noreply.github.com>
Date: Sun, 3 Dec 2023 16:47:40 -0500
Subject: [PATCH 37/72] Add quick fix for non root bases

---
 website/astro.config.mjs                   |  2 +-
 website/src/components/HeadCommon.astro    |  9 +++++----
 website/src/components/Header/Header.astro |  6 +++++-
 website/src/pages/swatch/index.astro       |  9 ++++++---
 website/src/repl/Footer.jsx                |  6 +++++-
 website/src/repl/Header.jsx                |  4 ++++
 website/src/repl/prebake.mjs               | 12 ++++++++----
 7 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/website/astro.config.mjs b/website/astro.config.mjs
index 84a89b33..a192c4ab 100644
--- a/website/astro.config.mjs
+++ b/website/astro.config.mjs
@@ -122,7 +122,7 @@ export default defineConfig({
     }),
   ],
   site,
-  base,
+  base: base,
   vite: {
     ssr: {
       // Example: Force a broken package to skip SSR processing, if needed
diff --git a/website/src/components/HeadCommon.astro b/website/src/components/HeadCommon.astro
index 2aa6acfe..724c4b07 100644
--- a/website/src/components/HeadCommon.astro
+++ b/website/src/components/HeadCommon.astro
@@ -4,6 +4,7 @@ import '../styles/index.css';
 
 const { BASE_URL } = import.meta.env;
 const base = BASE_URL;
+const baseNoTrailing = base.endsWith('/') ? base.slice(0, -1) : base;
 ---
 
 <!-- Global Metadata -->
@@ -11,20 +12,20 @@ const base = BASE_URL;
 <meta name="viewport" content="width=device-width" />
 <meta name="generator" content={Astro.generator} />
 
-<link rel="icon" type="image/svg+xml" href="favicon.ico" />
+<link rel="icon" type="image/svg+xml" href={`${baseNoTrailing}/favicon.ico`} />
 
 <meta
   name="description"
   content="Strudel is a music live coding environment for the browser, porting the TidalCycles pattern language to JavaScript."
 />
-<link rel="icon" href="/favicon.ico" />
-<link rel="apple-touch-icon" href="/icons/apple-icon-180.png" sizes="180x180" />
+<link rel="icon" href={`${baseNoTrailing}/favicon.ico`} />
+<link rel="apple-touch-icon" href={`${baseNoTrailing}/icons/apple-icon-180.png`} sizes="180x180" />
 <meta name="theme-color" content="#222222" />
 
 <base href={base} />
 
 <!-- Scrollable a11y code helper -->
-<script src="./make-scrollable-code-focusable.js" is:inline></script>
+<script src{`${baseNoTrailing}/make-scrollable-code-focusable.js`} is:inline></script>
 
 <script src="/src/pwa.ts"></script>
 <!-- this does not work for some reason: -->
diff --git a/website/src/components/Header/Header.astro b/website/src/components/Header/Header.astro
index 4cee4282..b429fdb1 100644
--- a/website/src/components/Header/Header.astro
+++ b/website/src/components/Header/Header.astro
@@ -16,6 +16,10 @@ const { currentPage } = Astro.props as Props;
 // const lang = getLanguageFromURL(currentPage);
 const langCode = 'en'; // getLanguageFromURL(currentPage);
 const sidebar = SIDEBAR[langCode];
+
+const { BASE_URL } = import.meta.env;
+const base = BASE_URL;
+const baseNoTrailing = base.endsWith('/') ? base.slice(0, -1) : base;
 ---
 
 <nav
@@ -37,7 +41,7 @@ const sidebar = SIDEBAR[langCode];
   <div class="search-item h-10">
     <Search client:idle />
   </div>
-  <a href="./" class="hidden md:flex cursor-pointer items-center space-x-1"
+  <a href={`${baseNoTrailing}/`} class="hidden md:flex cursor-pointer items-center space-x-1"
     ><CommandLineIcon className="w-5 h-5" /><span>go to REPL</span>
   </a>
   <div class="md:hidden">
diff --git a/website/src/pages/swatch/index.astro b/website/src/pages/swatch/index.astro
index e10ebcb7..bbc9df48 100644
--- a/website/src/pages/swatch/index.astro
+++ b/website/src/pages/swatch/index.astro
@@ -5,7 +5,10 @@ import { Content } from '../../../../my-patterns/README.md';
 import HeadCommon from '../../components/HeadCommon.astro';
 
 const myPatterns = await getMyPatterns();
----
+
+const { BASE_URL } = import.meta.env;
+const base = BASE_URL;
+const baseNoTrailing = base.endsWith('/') ? base.slice(0, -1) : base;---
 
 <head>
   <HeadCommon />
@@ -23,12 +26,12 @@ const myPatterns = await getMyPatterns();
       Object.entries(myPatterns).map(([name, tune]) => (
         <a
           class="rounded-md bg-slate-900 hover:bg-slate-700 cursor-pointer relative"
-          href={`./#${btoa(tune as string)}`}
+          href={`${baseNoTrailing}/#${btoa(tune as string)}`}
         >
           <div class="absolute w-full h-full flex justify-center items-center">
             <span class="bg-slate-800 p-2 rounded-md text-white">{name}</span>
           </div>
-          <img src={`./swatch/${name}.png`} />
+          <img src={`${baseNoTrailing}/swatch/${name}.png`} />
         </a>
       ))
     }
diff --git a/website/src/repl/Footer.jsx b/website/src/repl/Footer.jsx
index 35625093..dee13f5b 100644
--- a/website/src/repl/Footer.jsx
+++ b/website/src/repl/Footer.jsx
@@ -13,6 +13,10 @@ import { FilesTab } from './FilesTab';
 
 const TAURI = window.__TAURI__;
 
+const { BASE_URL } = import.meta.env;
+const base = BASE_URL;
+const baseNoTrailing = base.endsWith('/') ? base.slice(0, -1) : base;
+
 export function Footer({ context }) {
   const footerContent = useRef();
   const [log, setLog] = useState([]);
@@ -154,7 +158,7 @@ function WelcomeTab() {
       </p>
       <p>
         To learn more about what this all means, check out the{' '}
-        <a href="./workshop/getting-started" target="_blank">
+        <a href={`${baseNoTrailing}/workshop/getting-started`} target="_blank">
           interactive tutorial
         </a>
         . Also feel free to join the{' '}
diff --git a/website/src/repl/Header.jsx b/website/src/repl/Header.jsx
index 5e991f8a..49ebe84f 100644
--- a/website/src/repl/Header.jsx
+++ b/website/src/repl/Header.jsx
@@ -12,6 +12,10 @@ import './Repl.css';
 const { BASE_URL } = import.meta.env;
 const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
 
+const { BASE_URL } = import.meta.env;
+const base = BASE_URL;
+const baseNoTrailing = base.endsWith('/') ? base.slice(0, -1) : base;
+
 export function Header({ context }) {
   const {
     embedded,
diff --git a/website/src/repl/prebake.mjs b/website/src/repl/prebake.mjs
index 28678c9d..c5a04859 100644
--- a/website/src/repl/prebake.mjs
+++ b/website/src/repl/prebake.mjs
@@ -3,6 +3,10 @@ import { registerSynthSounds, registerZZFXSounds, samples } from '@strudel.cycle
 import './piano.mjs';
 import './files.mjs';
 
+const { BASE_URL } = import.meta.env;
+const base = BASE_URL;
+const baseNoTrailing = base.endsWith('/') ? base.slice(0, -1) : base;
+
 export async function prebake() {
   // https://archive.org/details/SalamanderGrandPianoV3
   // License: CC-by http://creativecommons.org/licenses/by/3.0/ Author: Alexander Holm
@@ -14,16 +18,16 @@ export async function prebake() {
     // => getting "window is not defined", as soon as "@strudel.cycles/soundfonts" is imported statically
     // seems to be a problem with soundfont2
     import('@strudel.cycles/soundfonts').then(({ registerSoundfonts }) => registerSoundfonts()),
-    samples(`./piano.json`, `./piano/`, { prebake: true }),
+    samples(`${baseNoTrailing}/piano.json`, `./piano/`, { prebake: true }),
     // https://github.com/sgossner/VCSL/
     // https://api.github.com/repositories/126427031/contents/
     // LICENSE: CC0 general-purpose
-    samples(`./vcsl.json`, 'github:sgossner/VCSL/master/', { prebake: true }),
-    samples(`./tidal-drum-machines.json`, 'github:ritchse/tidal-drum-machines/main/machines/', {
+    samples(`${baseNoTrailing}/vcsl.json`, 'github:sgossner/VCSL/master/', { prebake: true }),
+    samples(`${baseNoTrailing}/tidal-drum-machines.json`, 'github:ritchse/tidal-drum-machines/main/machines/', {
       prebake: true,
       tag: 'drum-machines',
     }),
-    samples(`./EmuSP12.json`, `./EmuSP12/`, { prebake: true, tag: 'drum-machines' }),
+    samples(`${baseNoTrailing}/EmuSP12.json`, `${baseNoTrailing}/EmuSP12/`, { prebake: true, tag: 'drum-machines' }),
     samples(
       {
         casio: ['casio/high.wav', 'casio/low.wav', 'casio/noise.wav'],

From 2c43fb25123c5e0978bcdd571dd5835515c0d9dd Mon Sep 17 00:00:00 2001
From: Priere <44214460+shiyouganai@users.noreply.github.com>
Date: Sun, 3 Dec 2023 16:50:28 -0500
Subject: [PATCH 38/72] Remove unnecessary change

---
 website/astro.config.mjs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/astro.config.mjs b/website/astro.config.mjs
index a192c4ab..84a89b33 100644
--- a/website/astro.config.mjs
+++ b/website/astro.config.mjs
@@ -122,7 +122,7 @@ export default defineConfig({
     }),
   ],
   site,
-  base: base,
+  base,
   vite: {
     ssr: {
       // Example: Force a broken package to skip SSR processing, if needed

From 018a45e2d45c278b0151e0b5c58c29ed2b20740c Mon Sep 17 00:00:00 2001
From: Priere <44214460+shiyouganai@users.noreply.github.com>
Date: Tue, 5 Dec 2023 20:52:21 -0500
Subject: [PATCH 39/72] Rework rehype plugin and clean up changes

---
 website/astro.config.mjs                      | 37 ++++++++++++-------
 website/src/components/HeadCommon.astro       |  5 +--
 website/src/components/Header/Header.astro    |  5 +--
 website/src/pages/swatch/index.astro          |  6 +--
 .../src/pages/workshop/getting-started.mdx    |  4 +-
 website/src/repl/Footer.jsx                   |  5 +--
 website/src/repl/Header.jsx                   |  4 --
 website/src/repl/prebake.mjs                  |  3 +-
 8 files changed, 36 insertions(+), 33 deletions(-)

diff --git a/website/astro.config.mjs b/website/astro.config.mjs
index 84a89b33..3a18ce54 100644
--- a/website/astro.config.mjs
+++ b/website/astro.config.mjs
@@ -15,25 +15,34 @@ const site = `https://strudel.cc/`; // root url without a path
 const base = '/'; // base path of the strudel site
 const baseNoTrailing = base.endsWith('/') ? base.slice(0, -1) : base;
 
-// this rehype plugin converts relative anchor links to absolute ones
-// it wokrs by prepending the absolute page path to anchor links
-// example: #gain -> /learn/effects/#gain
+// this rehype plugin fixes relative links
+// it works by prepending the base + page path to anchor links
+// and by prepending the base path to all other relative links
 // this is necessary when using a base href like <base href={base} />
-// in this setup, relative anchor links will always link to base, instead of the current page
-function absoluteAnchors() {
+// examples with base as "mybase":
+//   #gain -> /mybase/learn/effects/#gain
+//   /some/page -> /mybase/some/page
+function relativeURLFix() {
   return (tree, file) => {
     const chunks = file.history[0].split('/src/pages/'); // file.history[0] is the file path
     const path = chunks[chunks.length - 1].slice(0, -4); // only path inside src/pages, without .mdx
     return rehypeUrls((url) => {
-      if (url.href.startsWith('/')) {
-        const hrefWithTrailingSlash = url.href.endsWith('/') ? url.href : url.href + '/';
-        return baseNoTrailing + hrefWithTrailingSlash;
+      // NOTE: the base argument to the URL constructor is ignored if the input is already
+      //       absolute and used if not, which facilitates the comparison below
+      // true if url is relative
+      if (new URL(site).origin === new URL(url.href, site).origin) {
+        let newHref = baseNoTrailing;
+        if (url.href.startsWith('#')) {
+          // special case: a relative anchor link to the current page
+          newHref += `/${path}/${url.href}`;
+        } else {
+          // any other relative link
+          // NOTE: this does strip off serialized queries and fragments
+          newHref += (url.pathname.endsWith('/') ? url.pathname : url.pathname + '/');
+        }
+        // console.log(url.href + ' -> ', newHref);
+        return newHref;
       }
-      if (url.href.startsWith('#')) {
-        const absoluteUrl = `${baseNoTrailing}/${path}/${url.href}`;
-        return absoluteUrl;
-      }
-      // console.log(url.href + ' -> ', absoluteUrl);
       return;
     })(tree);
   };
@@ -44,7 +53,7 @@ const options = {
     remarkToc,
     // E.g. `remark-frontmatter`
   ],
-  rehypePlugins: [rehypeSlug, [rehypeAutolinkHeadings, { behavior: 'append' }], absoluteAnchors],
+  rehypePlugins: [rehypeSlug, [rehypeAutolinkHeadings, { behavior: 'append' }], relativeURLFix],
 };
 
 // https://astro.build/config
diff --git a/website/src/components/HeadCommon.astro b/website/src/components/HeadCommon.astro
index 724c4b07..ab18500f 100644
--- a/website/src/components/HeadCommon.astro
+++ b/website/src/components/HeadCommon.astro
@@ -3,8 +3,7 @@ import { pwaInfo } from 'virtual:pwa-info';
 import '../styles/index.css';
 
 const { BASE_URL } = import.meta.env;
-const base = BASE_URL;
-const baseNoTrailing = base.endsWith('/') ? base.slice(0, -1) : base;
+const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
 ---
 
 <!-- Global Metadata -->
@@ -22,7 +21,7 @@ const baseNoTrailing = base.endsWith('/') ? base.slice(0, -1) : base;
 <link rel="apple-touch-icon" href={`${baseNoTrailing}/icons/apple-icon-180.png`} sizes="180x180" />
 <meta name="theme-color" content="#222222" />
 
-<base href={base} />
+<base href={BASE_URL} />
 
 <!-- Scrollable a11y code helper -->
 <script src{`${baseNoTrailing}/make-scrollable-code-focusable.js`} is:inline></script>
diff --git a/website/src/components/Header/Header.astro b/website/src/components/Header/Header.astro
index b429fdb1..6447d9d6 100644
--- a/website/src/components/Header/Header.astro
+++ b/website/src/components/Header/Header.astro
@@ -18,8 +18,7 @@ const langCode = 'en'; // getLanguageFromURL(currentPage);
 const sidebar = SIDEBAR[langCode];
 
 const { BASE_URL } = import.meta.env;
-const base = BASE_URL;
-const baseNoTrailing = base.endsWith('/') ? base.slice(0, -1) : base;
+const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
 ---
 
 <nav
@@ -27,7 +26,7 @@ const baseNoTrailing = base.endsWith('/') ? base.slice(0, -1) : base;
   title="Top Navigation"
 >
   <div class="flex overflow-visible items-center grow" style="overflow:visible">
-    <a href="/" class="flex items-center text-2xl space-x-2">
+    <a href={`${baseNoTrailing}/`} class="flex items-center text-2xl space-x-2">
       <h1 class="font-bold flex space-x-2 items-baseline text-xl">
         <span>🌀</span>
         <div class="flex space-x-1 items-baseline">
diff --git a/website/src/pages/swatch/index.astro b/website/src/pages/swatch/index.astro
index bbc9df48..36088db5 100644
--- a/website/src/pages/swatch/index.astro
+++ b/website/src/pages/swatch/index.astro
@@ -7,8 +7,8 @@ import HeadCommon from '../../components/HeadCommon.astro';
 const myPatterns = await getMyPatterns();
 
 const { BASE_URL } = import.meta.env;
-const base = BASE_URL;
-const baseNoTrailing = base.endsWith('/') ? base.slice(0, -1) : base;---
+const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
+---
 
 <head>
   <HeadCommon />
@@ -31,7 +31,7 @@ const baseNoTrailing = base.endsWith('/') ? base.slice(0, -1) : base;---
           <div class="absolute w-full h-full flex justify-center items-center">
             <span class="bg-slate-800 p-2 rounded-md text-white">{name}</span>
           </div>
-          <img src={`${baseNoTrailing}/swatch/${name}.png`} />
+          <img src={`${baseNoTrailing}/swatch/${name}.png/`} />
         </a>
       ))
     }
diff --git a/website/src/pages/workshop/getting-started.mdx b/website/src/pages/workshop/getting-started.mdx
index 410c6da5..4259623c 100644
--- a/website/src/pages/workshop/getting-started.mdx
+++ b/website/src/pages/workshop/getting-started.mdx
@@ -7,7 +7,9 @@ import { MiniRepl } from '../../docs/MiniRepl';
 
 # Welcome
 
-<img src="/icons/strudel_icon.png" className="w-32 animate-pulse md:float-right ml-8" />
+<div className="w-32 animate-pulse md:float-right ml-8">
+![Strudel Icon](/icons/strudel_icon.png)
+</div>
 
 Welcome to the Strudel documentation pages!
 You've come to the right place if you want to learn how to make music with code.
diff --git a/website/src/repl/Footer.jsx b/website/src/repl/Footer.jsx
index dee13f5b..cbf0b63b 100644
--- a/website/src/repl/Footer.jsx
+++ b/website/src/repl/Footer.jsx
@@ -14,8 +14,7 @@ import { FilesTab } from './FilesTab';
 const TAURI = window.__TAURI__;
 
 const { BASE_URL } = import.meta.env;
-const base = BASE_URL;
-const baseNoTrailing = base.endsWith('/') ? base.slice(0, -1) : base;
+const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
 
 export function Footer({ context }) {
   const footerContent = useRef();
@@ -158,7 +157,7 @@ function WelcomeTab() {
       </p>
       <p>
         To learn more about what this all means, check out the{' '}
-        <a href={`${baseNoTrailing}/workshop/getting-started`} target="_blank">
+        <a href={`${baseNoTrailing}/workshop/getting-started/`} target="_blank">
           interactive tutorial
         </a>
         . Also feel free to join the{' '}
diff --git a/website/src/repl/Header.jsx b/website/src/repl/Header.jsx
index 49ebe84f..5e991f8a 100644
--- a/website/src/repl/Header.jsx
+++ b/website/src/repl/Header.jsx
@@ -12,10 +12,6 @@ import './Repl.css';
 const { BASE_URL } = import.meta.env;
 const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
 
-const { BASE_URL } = import.meta.env;
-const base = BASE_URL;
-const baseNoTrailing = base.endsWith('/') ? base.slice(0, -1) : base;
-
 export function Header({ context }) {
   const {
     embedded,
diff --git a/website/src/repl/prebake.mjs b/website/src/repl/prebake.mjs
index c5a04859..74ca0053 100644
--- a/website/src/repl/prebake.mjs
+++ b/website/src/repl/prebake.mjs
@@ -4,8 +4,7 @@ import './piano.mjs';
 import './files.mjs';
 
 const { BASE_URL } = import.meta.env;
-const base = BASE_URL;
-const baseNoTrailing = base.endsWith('/') ? base.slice(0, -1) : base;
+const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
 
 export async function prebake() {
   // https://archive.org/details/SalamanderGrandPianoV3

From e1a8bd333d9f955a41d0e65da28ef6e45077e9de Mon Sep 17 00:00:00 2001
From: Priere <44214460+shiyouganai@users.noreply.github.com>
Date: Wed, 6 Dec 2023 03:41:54 -0500
Subject: [PATCH 40/72] Fix comment

---
 website/astro.config.mjs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/astro.config.mjs b/website/astro.config.mjs
index 3a18ce54..8310fa0c 100644
--- a/website/astro.config.mjs
+++ b/website/astro.config.mjs
@@ -29,7 +29,7 @@ function relativeURLFix() {
     return rehypeUrls((url) => {
       // NOTE: the base argument to the URL constructor is ignored if the input is already
       //       absolute and used if not, which facilitates the comparison below
-      // true if url is relative
+      // true if origins are same, and relative urls are considered as origin equal to site var value
       if (new URL(site).origin === new URL(url.href, site).origin) {
         let newHref = baseNoTrailing;
         if (url.href.startsWith('#')) {

From 5332f99a5a58ee9b923f906902871ce7e14d19d7 Mon Sep 17 00:00:00 2001
From: Priere <44214460+shiyouganai@users.noreply.github.com>
Date: Wed, 6 Dec 2023 03:43:38 -0500
Subject: [PATCH 41/72] Fix another comment

---
 website/astro.config.mjs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/astro.config.mjs b/website/astro.config.mjs
index 8310fa0c..c91ee0bc 100644
--- a/website/astro.config.mjs
+++ b/website/astro.config.mjs
@@ -36,7 +36,7 @@ function relativeURLFix() {
           // special case: a relative anchor link to the current page
           newHref += `/${path}/${url.href}`;
         } else {
-          // any other relative link
+          // any other same origin link
           // NOTE: this does strip off serialized queries and fragments
           newHref += (url.pathname.endsWith('/') ? url.pathname : url.pathname + '/');
         }

From 8e9b607fa1d3055b083c2e25abb3e29f267bd0bb Mon Sep 17 00:00:00 2001
From: Priere <44214460+shiyouganai@users.noreply.github.com>
Date: Wed, 6 Dec 2023 03:57:30 -0500
Subject: [PATCH 42/72] Revert to simpler link parsing and run formatter

---
 website/astro.config.mjs                      | 31 +++++++++----------
 .../src/pages/workshop/getting-started.mdx    |  4 +--
 2 files changed, 15 insertions(+), 20 deletions(-)

diff --git a/website/astro.config.mjs b/website/astro.config.mjs
index c91ee0bc..89bffbc9 100644
--- a/website/astro.config.mjs
+++ b/website/astro.config.mjs
@@ -17,7 +17,7 @@ const baseNoTrailing = base.endsWith('/') ? base.slice(0, -1) : base;
 
 // this rehype plugin fixes relative links
 // it works by prepending the base + page path to anchor links
-// and by prepending the base path to all other relative links
+// and by prepending the base path to other relative links starting with /
 // this is necessary when using a base href like <base href={base} />
 // examples with base as "mybase":
 //   #gain -> /mybase/learn/effects/#gain
@@ -27,23 +27,20 @@ function relativeURLFix() {
     const chunks = file.history[0].split('/src/pages/'); // file.history[0] is the file path
     const path = chunks[chunks.length - 1].slice(0, -4); // only path inside src/pages, without .mdx
     return rehypeUrls((url) => {
-      // NOTE: the base argument to the URL constructor is ignored if the input is already
-      //       absolute and used if not, which facilitates the comparison below
-      // true if origins are same, and relative urls are considered as origin equal to site var value
-      if (new URL(site).origin === new URL(url.href, site).origin) {
-        let newHref = baseNoTrailing;
-        if (url.href.startsWith('#')) {
-          // special case: a relative anchor link to the current page
-          newHref += `/${path}/${url.href}`;
-        } else {
-          // any other same origin link
-          // NOTE: this does strip off serialized queries and fragments
-          newHref += (url.pathname.endsWith('/') ? url.pathname : url.pathname + '/');
-        }
-        // console.log(url.href + ' -> ', newHref);
-        return newHref;
+      let newHref = baseNoTrailing;
+      if (url.href.startsWith('#')) {
+        // special case: a relative anchor link to the current page
+        newHref += `/${path}/${url.href}`;
+      } else if (url.href.startsWith('/')) {
+        // any other relative url starting with /
+        // NOTE: this does strip off serialized queries and fragments
+        newHref += url.pathname.endsWith('/') ? url.pathname : url.pathname + '/';
+      } else {
+        // leave this URL alone
+        return;
       }
-      return;
+      // console.log(url.href + ' -> ', newHref);
+      return newHref;
     })(tree);
   };
 }
diff --git a/website/src/pages/workshop/getting-started.mdx b/website/src/pages/workshop/getting-started.mdx
index 4259623c..3d37a5cf 100644
--- a/website/src/pages/workshop/getting-started.mdx
+++ b/website/src/pages/workshop/getting-started.mdx
@@ -7,9 +7,7 @@ import { MiniRepl } from '../../docs/MiniRepl';
 
 # Welcome
 
-<div className="w-32 animate-pulse md:float-right ml-8">
-![Strudel Icon](/icons/strudel_icon.png)
-</div>
+<div className="w-32 animate-pulse md:float-right ml-8">![Strudel Icon](/icons/strudel_icon.png)</div>
 
 Welcome to the Strudel documentation pages!
 You've come to the right place if you want to learn how to make music with code.

From 6b31160bbd54c8f16648538485b16126af3c2952 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Wed, 6 Dec 2023 21:34:39 +0100
Subject: [PATCH 43/72] fix: astro warnings

---
 website/src/pages/img/example-[name].png.js | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/website/src/pages/img/example-[name].png.js b/website/src/pages/img/example-[name].png.js
index 22938e38..b058a017 100644
--- a/website/src/pages/img/example-[name].png.js
+++ b/website/src/pages/img/example-[name].png.js
@@ -4,7 +4,7 @@ import { evaluate } from '@strudel.cycles/transpiler';
 import '../../../../test/runtime.mjs';
 import * as tunes from '../../repl/tunes.mjs';
 
-export async function get({ params, request }) {
+export async function GET({ params, request }) {
   const { name } = params;
   const tune = tunes[name];
   const { pattern } = await evaluate(tune);
@@ -13,10 +13,7 @@ export async function get({ params, request }) {
   const ctx = canvas.getContext('2d');
   pianoroll({ time: 4, haps, ctx, playhead: 1, fold: 1, background: 'transparent', playheadColor: 'transparent' });
   const buffer = canvas.toBuffer('image/png');
-  return {
-    body: buffer,
-    encoding: 'binary',
-  };
+  return new Response(buffer);
 }
 export function getStaticPaths() {
   return Object.keys(tunes).map((name) => ({

From 2ddd2d1f392829ad5fd9817b364daeafde6e50d7 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Wed, 6 Dec 2023 21:46:13 +0100
Subject: [PATCH 44/72] fix: search links with basehref

---
 website/src/components/Header/Search.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/website/src/components/Header/Search.tsx b/website/src/components/Header/Search.tsx
index d3a935f5..c982d80b 100644
--- a/website/src/components/Header/Search.tsx
+++ b/website/src/components/Header/Search.tsx
@@ -6,6 +6,8 @@ import './Search.css';
 
 import { createPortal } from 'react-dom';
 import * as docSearchReact from '@docsearch/react';
+const { BASE_URL } = import.meta.env;
+const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
 
 /** FIXME: This is still kinda nasty, but DocSearch is not ESM ready. */
 const DocSearchModal = docSearchReact.DocSearchModal || (docSearchReact as any).default.DocSearchModal;
@@ -89,9 +91,13 @@ export default function Search() {
                 const a = document.createElement('a');
                 a.href = item.url;
                 const hash = a.hash === '#overview' ? '' : a.hash;
+                let pathname = a.pathname;
+                pathname = pathname.startsWith('/') ? pathname.slice(1) : pathname;
+                pathname = pathname.endsWith('/') ? pathname.slice(0, -1) : pathname;
+                const url = `${baseNoTrailing}/${pathname}/${hash}`;
                 return {
                   ...item,
-                  url: `${a.pathname}${hash}`,
+                  url,
                 };
               });
             }}

From 1b372a9a7bad8698b14ceb9cb559b57e5ae176a4 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Wed, 6 Dec 2023 22:16:43 +0100
Subject: [PATCH 45/72] fix: missing hash for links starting with /

---
 website/astro.config.mjs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/website/astro.config.mjs b/website/astro.config.mjs
index 89bffbc9..b6617704 100644
--- a/website/astro.config.mjs
+++ b/website/astro.config.mjs
@@ -35,6 +35,7 @@ function relativeURLFix() {
         // any other relative url starting with /
         // NOTE: this does strip off serialized queries and fragments
         newHref += url.pathname.endsWith('/') ? url.pathname : url.pathname + '/';
+        newHref += url.hash || '';
       } else {
         // leave this URL alone
         return;

From cc4d38b4a5431b1add4044b28c6d2c140d45fd1c Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Wed, 6 Dec 2023 22:28:14 +0100
Subject: [PATCH 46/72] fix: swatch png src

---
 website/src/pages/swatch/index.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/pages/swatch/index.astro b/website/src/pages/swatch/index.astro
index 36088db5..65484856 100644
--- a/website/src/pages/swatch/index.astro
+++ b/website/src/pages/swatch/index.astro
@@ -31,7 +31,7 @@ const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL
           <div class="absolute w-full h-full flex justify-center items-center">
             <span class="bg-slate-800 p-2 rounded-md text-white">{name}</span>
           </div>
-          <img src={`${baseNoTrailing}/swatch/${name}.png/`} />
+          <img src={`${baseNoTrailing}/swatch/${name}.png`} />
         </a>
       ))
     }

From 93c5eeb99e809392dc54edfe1c738663bf5fbac3 Mon Sep 17 00:00:00 2001
From: Priere <44214460+shiyouganai@users.noreply.github.com>
Date: Wed, 6 Dec 2023 16:44:50 -0500
Subject: [PATCH 47/72] Fix examples page and de workshop img

---
 website/src/pages/de/workshop/getting-started.mdx | 2 +-
 website/src/pages/examples/index.astro            | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/website/src/pages/de/workshop/getting-started.mdx b/website/src/pages/de/workshop/getting-started.mdx
index 5ecc60f2..823d77dc 100644
--- a/website/src/pages/de/workshop/getting-started.mdx
+++ b/website/src/pages/de/workshop/getting-started.mdx
@@ -7,7 +7,7 @@ import { MiniRepl } from '../../../docs/MiniRepl';
 
 # Willkommen
 
-<img src="/icons/strudel_icon.png" className="w-32 animate-pulse md:float-right ml-8" />
+<div className="w-32 animate-pulse md:float-right ml-8">![Strudel Icon](/icons/strudel_icon.png)</div>
 
 Willkommen zum Strudel Workshop!
 Du hast den richtigen Ort gefunden wenn du lernen möchtest wie man mit Code Musik macht.
diff --git a/website/src/pages/examples/index.astro b/website/src/pages/examples/index.astro
index c973f2eb..d4440689 100644
--- a/website/src/pages/examples/index.astro
+++ b/website/src/pages/examples/index.astro
@@ -3,6 +3,9 @@ import * as tunes from '../../../src/repl/tunes.mjs';
 import HeadCommon from '../../components/HeadCommon.astro';
 
 import { getMetadata } from '../metadata_parser';
+
+const { BASE_URL } = import.meta.env;
+const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
 ---
 
 <head>
@@ -12,11 +15,11 @@ import { getMetadata } from '../metadata_parser';
   <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-2 p-2 select-none">
     {
       Object.entries(tunes).map(([name, tune]) => (
-        <a class="rounded-md bg-slate-900 hover:bg-slate-700 cursor-pointer relative" href={`./#${btoa(tune)}`}>
+        <a class="rounded-md bg-slate-900 hover:bg-slate-700 cursor-pointer relative" href={`${baseNoTrailing}/#${btoa(tune)}`}>
           <div class="absolute w-full h-full flex justify-center items-center">
             <span class="bg-slate-800 p-2 rounded-md text-white">{getMetadata(tune)['title'] || name}</span>
           </div>
-          <img src={`./img/example-${name}.png`} />
+          <img src={`${baseNoTrailing}/img/example-${name}.png`} />
         </a>
       ))
     }

From a32ed0274543de04efa9423131f18a2e294ce8c2 Mon Sep 17 00:00:00 2001
From: Priere <44214460+shiyouganai@users.noreply.github.com>
Date: Wed, 6 Dec 2023 16:57:43 -0500
Subject: [PATCH 48/72] Fix piano and two doc images

---
 website/src/pages/learn/pwa.mdx | 4 ++--
 website/src/repl/prebake.mjs    | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/website/src/pages/learn/pwa.mdx b/website/src/pages/learn/pwa.mdx
index a283112d..ba4b6b83 100644
--- a/website/src/pages/learn/pwa.mdx
+++ b/website/src/pages/learn/pwa.mdx
@@ -49,7 +49,7 @@ A standalone app has its own desktop / homescreen icon and launches in a separat
 without the browser ui.
 
 <figure>
-  <img src="./pwa/strudel-macos.png" alt="Strudel on MacOS" />
+  ![Strudel on MacOS](/pwa/strudel-macos.png)
   <figcaption>Strudel on MacOS</figcaption>
 </figure>
 
@@ -67,7 +67,7 @@ Without a chromium based browser, you can use [nativefier](https://github.com/na
 2. run `npx nativefier strudel.cc`
 
 <figure>
-  <img src="./pwa/strudel-linux.png" alt="Strudel on Linux" />
+  ![Strudel on Linux](/pwa/strudel-linux.png)
   <figcaption>Strudel on Linux</figcaption>
 </figure>
 
diff --git a/website/src/repl/prebake.mjs b/website/src/repl/prebake.mjs
index 74ca0053..0670d57d 100644
--- a/website/src/repl/prebake.mjs
+++ b/website/src/repl/prebake.mjs
@@ -17,7 +17,7 @@ export async function prebake() {
     // => getting "window is not defined", as soon as "@strudel.cycles/soundfonts" is imported statically
     // seems to be a problem with soundfont2
     import('@strudel.cycles/soundfonts').then(({ registerSoundfonts }) => registerSoundfonts()),
-    samples(`${baseNoTrailing}/piano.json`, `./piano/`, { prebake: true }),
+    samples(`${baseNoTrailing}/piano.json`, `${baseNoTrailing}/piano/`, { prebake: true }),
     // https://github.com/sgossner/VCSL/
     // https://api.github.com/repositories/126427031/contents/
     // LICENSE: CC0 general-purpose

From 60cee7fd2f90dacb9cb3d802bd86b26918b7f67c Mon Sep 17 00:00:00 2001
From: Priere <44214460+shiyouganai@users.noreply.github.com>
Date: Wed, 6 Dec 2023 17:37:49 -0500
Subject: [PATCH 49/72] Fix to not add trailing slash to URL with filename

---
 website/astro.config.mjs | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/website/astro.config.mjs b/website/astro.config.mjs
index b6617704..6ef307ef 100644
--- a/website/astro.config.mjs
+++ b/website/astro.config.mjs
@@ -33,8 +33,11 @@ function relativeURLFix() {
         newHref += `/${path}/${url.href}`;
       } else if (url.href.startsWith('/')) {
         // any other relative url starting with /
-        // NOTE: this does strip off serialized queries and fragments
-        newHref += url.pathname.endsWith('/') ? url.pathname : url.pathname + '/';
+        newHref += url.pathname;
+        if (url.pathname.indexOf('.') == -1) {
+          // append trailing slash to resource only if there is no file extension
+          newHref += url.pathname.endsWith('/') ? '' : '/';
+        }
         newHref += url.hash || '';
       } else {
         // leave this URL alone

From 78b2b5ccc3380a5176faa8651eb2312157af6f60 Mon Sep 17 00:00:00 2001
From: Priere <44214460+shiyouganai@users.noreply.github.com>
Date: Wed, 6 Dec 2023 17:54:29 -0500
Subject: [PATCH 50/72] Don't trim serialized query part of URL

---
 website/astro.config.mjs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/website/astro.config.mjs b/website/astro.config.mjs
index 6ef307ef..c5ca3317 100644
--- a/website/astro.config.mjs
+++ b/website/astro.config.mjs
@@ -38,6 +38,7 @@ function relativeURLFix() {
           // append trailing slash to resource only if there is no file extension
           newHref += url.pathname.endsWith('/') ? '' : '/';
         }
+        newHref += url.search || '';
         newHref += url.hash || '';
       } else {
         // leave this URL alone

From 20f3ddd277cd44642a9a201260d89b41fb32b166 Mon Sep 17 00:00:00 2001
From: Bernhard Wagner <gitcommit@nosuch.biz>
Date: Thu, 7 Dec 2023 10:19:26 +0100
Subject: [PATCH 51/72] CHANGES: pnpm 8.1.3 to 8.11.0

---
 .github/workflows/deploy.yml | 2 +-
 .github/workflows/test.yml   | 2 +-
 CONTRIBUTING.md              | 3 +--
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 2279b20f..256a1772 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -24,7 +24,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v2
         with:
-          version: 8.3.1
+          version: 8.11.0
       - uses: actions/setup-node@v3
         with:
           node-version: 18
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index f53600e9..0f6c1181 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -13,7 +13,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v2
         with:
-          version: 8.3.1
+          version: 8.11.0
       - uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 1826b12a..556df3fc 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -66,8 +66,7 @@ To get the project up and running for development, make sure you have installed:
 
 - [git](https://git-scm.com/)
 - [node](https://nodejs.org/en/) >= 18
-- [pnpm](https://pnpm.io/) (`curl -fsSL https://get.pnpm.io/install.sh | env PNPM_VERSION=8.3.1 sh -`)
-  tests failed to work correctly with newer pnpm versions, so we pin 8.3.1 for now. (see issue #833)
+- [pnpm](https://pnpm.io/) (`curl -fsSL https://get.pnpm.io/install.sh | env PNPM_VERSION=8.11.0 sh -`)
 
 then, do the following:
 

From 7225b0b18dd566e555960160d24baff1ba8b0310 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Thu, 7 Dec 2023 17:33:23 +0100
Subject: [PATCH 52/72] merge changes

---
 website/src/repl/panel/SoundsTab.jsx  | 4 ++--
 website/src/repl/panel/WelcomeTab.jsx | 5 ++++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/website/src/repl/panel/SoundsTab.jsx b/website/src/repl/panel/SoundsTab.jsx
index b7fbb542..aeda4f6d 100644
--- a/website/src/repl/panel/SoundsTab.jsx
+++ b/website/src/repl/panel/SoundsTab.jsx
@@ -1,7 +1,7 @@
 import { useEvent } from '@strudel.cycles/react';
 // import { cx } from '@strudel.cycles/react';
 import { useStore } from '@nanostores/react';
-import { getAudioContext, soundMap } from '@strudel.cycles/webaudio';
+import { getAudioContext, soundMap, connectToDestination } from '@strudel.cycles/webaudio';
 import React, { useMemo, useRef } from 'react';
 import { settingsMap, useSettings } from '../../settings.mjs';
 import { ButtonGroup } from './Forms.jsx';
@@ -72,7 +72,7 @@ export function SoundsTab() {
               const onended = () => trigRef.current?.node?.disconnect();
               trigRef.current = Promise.resolve(onTrigger(time, params, onended));
               trigRef.current.then((ref) => {
-                ref?.node.connect(ctx.destination);
+                connectToDestination(ref?.node);
               });
             }}
           >
diff --git a/website/src/repl/panel/WelcomeTab.jsx b/website/src/repl/panel/WelcomeTab.jsx
index 8c4e7de6..1e5b48a9 100644
--- a/website/src/repl/panel/WelcomeTab.jsx
+++ b/website/src/repl/panel/WelcomeTab.jsx
@@ -2,6 +2,9 @@ import { cx } from '@strudel.cycles/react';
 import React from 'react';
 import * as tunes from '../tunes.mjs';
 
+const { BASE_URL } = import.meta.env;
+const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
+
 export function WelcomeTab({ context }) {
   return (
     <div className="prose dark:prose-invert max-w-[600px] pt-2 font-sans pb-8 px-4">
@@ -20,7 +23,7 @@ export function WelcomeTab({ context }) {
       </p>
       <p>
         To learn more about what this all means, check out the{' '}
-        <a href="./workshop/getting-started" target="_blank">
+        <a href={`${baseNoTrailing}/workshop/getting-started/`} target="_blank">
           interactive tutorial
         </a>
         . Also feel free to join the{' '}

From a45d87667fbb8de41a8f629994e0fbb4141f843a Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Thu, 7 Dec 2023 20:17:01 +0100
Subject: [PATCH 53/72] fix: update / fork logic

---
 website/src/repl/Repl.jsx |  4 ++--
 website/src/settings.mjs  | 12 ++++++++++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/website/src/repl/Repl.jsx b/website/src/repl/Repl.jsx
index 8deaa4f8..3d3117ae 100644
--- a/website/src/repl/Repl.jsx
+++ b/website/src/repl/Repl.jsx
@@ -17,7 +17,7 @@ import { prebake } from './prebake.mjs';
 import * as tunes from './tunes.mjs';
 import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon';
 import { themes } from './themes.mjs';
-import { settingsMap, useSettings, setLatestCode, updateUserPattern } from '../settings.mjs';
+import { settingsMap, useSettings, setLatestCode, updateUserCode } from '../settings.mjs';
 import Loader from './Loader';
 import { settingPatterns } from '../settings.mjs';
 import { code2hash, hash2code } from './helpers.mjs';
@@ -148,7 +148,7 @@ export function Repl({ embedded = false }) {
         cleanupDraw();
       },
       afterEval: ({ code, meta }) => {
-        updateUserPattern(code);
+        updateUserCode(code);
         setMiniLocations(meta.miniLocations);
         setWidgets(meta.widgets);
         setPending(false);
diff --git a/website/src/settings.mjs b/website/src/settings.mjs
index 2f9feaae..32bad5c1 100644
--- a/website/src/settings.mjs
+++ b/website/src/settings.mjs
@@ -126,14 +126,22 @@ export function renameActivePattern() {
   setActivePattern(newName);
 }
 
-export function updateUserPattern(code) {
+export function updateUserCode(code) {
   const userPatterns = getUserPatterns();
   let activePattern = getSetting('activePattern');
+  // check if code is that of an example tune
+  const [example] = Object.entries(tunes).find(([_, tune]) => tune === code) || [];
+  if (example) {
+    // select example
+    setActivePattern(example);
+    return;
+  }
   if (!activePattern) {
+    // create new user pattern
     activePattern = newUserPattern();
     setActivePattern(activePattern);
   } else if (!!tunes[activePattern] && code !== tunes[activePattern]) {
-    // is example / system pattern
+    // fork example
     activePattern = getNextCloneName(activePattern);
     setActivePattern(activePattern);
   }

From 056fae518b2b795a12ee527aa1e2a30e3c43db45 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Thu, 7 Dec 2023 20:28:01 +0100
Subject: [PATCH 54/72] add checks for forbidden actions

---
 website/src/settings.mjs | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/website/src/settings.mjs b/website/src/settings.mjs
index 32bad5c1..24269200 100644
--- a/website/src/settings.mjs
+++ b/website/src/settings.mjs
@@ -97,6 +97,9 @@ export function newUserPattern() {
 }
 
 export function clearUserPatterns() {
+  if (!confirm(`This will delete all your patterns. Are you really sure?`)) {
+    return;
+  }
   setUserPatterns({});
 }
 
@@ -113,13 +116,17 @@ export function getUserPattern(key) {
 }
 
 export function renameActivePattern() {
-  const newName = prompt('Enter new name');
+  let activePattern = getSetting('activePattern');
   let userPatterns = getUserPatterns();
+  if (!userPatterns[activePattern]) {
+    alert('Cannot rename examples');
+    return;
+  }
+  const newName = prompt('Enter new name', activePattern);
   if (userPatterns[newName]) {
     alert('Name already taken!');
     return;
   }
-  let activePattern = getSetting('activePattern');
   userPatterns[newName] = userPatterns[activePattern]; // copy code
   delete userPatterns[activePattern];
   setUserPatterns({ ...userPatterns });
@@ -155,6 +162,13 @@ export function deleteActivePattern() {
     return;
   }
   const userPatterns = getUserPatterns();
+  if (!userPatterns[activePattern]) {
+    alert('Cannot delete examples');
+    return;
+  }
+  if (!confirm(`Really delete the selected pattern "${activePattern}"?`)) {
+    return;
+  }
   setUserPatterns(Object.fromEntries(Object.entries(userPatterns).filter(([key]) => key !== activePattern)));
   setActivePattern('');
 }

From 2f9244e90d7c9a4885abefa5a834fc6e152d3478 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Thu, 7 Dec 2023 20:28:04 +0100
Subject: [PATCH 55/72] style

---
 website/src/repl/panel/PatternsTab.jsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/website/src/repl/panel/PatternsTab.jsx b/website/src/repl/panel/PatternsTab.jsx
index d117efe1..1b19c8e0 100644
--- a/website/src/repl/panel/PatternsTab.jsx
+++ b/website/src/repl/panel/PatternsTab.jsx
@@ -20,10 +20,10 @@ export function PatternsTab({ context }) {
   return (
     <div className="px-4 w-full text-foreground space-y-4">
       <section>
-        <h2 className="text-xl mb-2">My Patterns</h2>
-        <div className="space-x-1">
+        <h2 className="text-xl mb-2">Pattern Collection</h2>
+        <div className="space-x-4 border-b border-foreground mb-1">
           <button
-            className="underline"
+            className="hover:opacity-50"
             onClick={() => {
               const name = newUserPattern();
               const { code } = getUserPattern(name);
@@ -32,16 +32,16 @@ export function PatternsTab({ context }) {
           >
             new
           </button>
-          <button className="underline" onClick={() => duplicateActivePattern()}>
+          <button className="hover:opacity-50" onClick={() => duplicateActivePattern()}>
             duplicate
           </button>
-          <button className="underline" onClick={() => renameActivePattern()}>
+          <button className="hover:opacity-50" onClick={() => renameActivePattern()}>
             rename
           </button>
-          <button className="underline" onClick={() => deleteActivePattern()}>
+          <button className="hover:opacity-50" onClick={() => deleteActivePattern()}>
             delete
           </button>
-          <button className="underline" onClick={() => clearUserPatterns()}>
+          <button className="hover:opacity-50" onClick={() => clearUserPatterns()}>
             clear
           </button>
         </div>

From e551dfeddbb8a5d2d85b9c02536c2d96bae1d0f8 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Thu, 7 Dec 2023 20:30:13 +0100
Subject: [PATCH 56/72] reorder tabs + remove duplicated examples

---
 website/src/repl/panel/Panel.jsx      |  2 +-
 website/src/repl/panel/WelcomeTab.jsx | 12 ------------
 2 files changed, 1 insertion(+), 13 deletions(-)

diff --git a/website/src/repl/panel/Panel.jsx b/website/src/repl/panel/Panel.jsx
index 711bd644..b815770c 100644
--- a/website/src/repl/panel/Panel.jsx
+++ b/website/src/repl/panel/Panel.jsx
@@ -84,9 +84,9 @@ export function Panel({ context }) {
       <div className="flex justify-between px-2">
         <div className={cx('flex select-none max-w-full overflow-auto', activeFooter && 'pb-2')}>
           <PanelTab name="intro" label="welcome" />
+          <PanelTab name="patterns" />
           <PanelTab name="sounds" />
           <PanelTab name="console" />
-          <PanelTab name="patterns" />
           <PanelTab name="reference" />
           <PanelTab name="settings" />
           {TAURI && <PanelTab name="files" />}
diff --git a/website/src/repl/panel/WelcomeTab.jsx b/website/src/repl/panel/WelcomeTab.jsx
index 1e5b48a9..feb0a583 100644
--- a/website/src/repl/panel/WelcomeTab.jsx
+++ b/website/src/repl/panel/WelcomeTab.jsx
@@ -48,18 +48,6 @@ export function WelcomeTab({ context }) {
         </a>{' '}
         to ensure ongoing development 💖
       </p>
-      <h2 className="text-xl mb-2">examples</h2>
-      <div className="not-prose">
-        {Object.entries(tunes).map(([key, tune]) => (
-          <a
-            key={key}
-            className="mr-4 hover:opacity-50 cursor-pointer inline-block"
-            onClick={() => context.handleUpdate(tune)}
-          >
-            {key}
-          </a>
-        ))}
-      </div>
     </div>
   );
 }

From ac2e450e38399777e712504866c8bbac8738f65c Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Thu, 7 Dec 2023 21:43:08 +0100
Subject: [PATCH 57/72] fix: duplicate example

---
 website/src/settings.mjs | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/website/src/settings.mjs b/website/src/settings.mjs
index 24269200..67d386cf 100644
--- a/website/src/settings.mjs
+++ b/website/src/settings.mjs
@@ -138,7 +138,7 @@ export function updateUserCode(code) {
   let activePattern = getSetting('activePattern');
   // check if code is that of an example tune
   const [example] = Object.entries(tunes).find(([_, tune]) => tune === code) || [];
-  if (example) {
+  if (example && (!activePattern || activePattern === example)) {
     // select example
     setActivePattern(example);
     return;
@@ -187,5 +187,6 @@ export function duplicateActivePattern() {
 }
 
 export function setActivePattern(key) {
+  console.log('set', key);
   settingsMap.setKey('activePattern', key);
 }

From a750490eeada9c269df3cc59739c6f5fe1ce01d9 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 8 Dec 2023 08:49:03 +0100
Subject: [PATCH 58/72] begin pattern import button

---
 website/src/repl/panel/PatternsTab.jsx | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/website/src/repl/panel/PatternsTab.jsx b/website/src/repl/panel/PatternsTab.jsx
index 1b19c8e0..fba6fbc9 100644
--- a/website/src/repl/panel/PatternsTab.jsx
+++ b/website/src/repl/panel/PatternsTab.jsx
@@ -44,6 +44,20 @@ export function PatternsTab({ context }) {
           <button className="hover:opacity-50" onClick={() => clearUserPatterns()}>
             clear
           </button>
+          <label className="hover:opacity-50 cursor-pointer">
+            <input
+              style={{ display: 'none' }}
+              type="file"
+              directory=""
+              webkitdirectory=""
+              multiple
+              accept="audio/*"
+              onChange={(e) => {
+                console.log('change', e.target.files);
+              }}
+            />
+            import
+          </label>
         </div>
         {Object.entries(userPatterns).map(([key, up]) => (
           <a
@@ -83,11 +97,3 @@ export function PatternsTab({ context }) {
     </div>
   );
 }
-
-/*
-selectable examples
-if example selected
-  type character -> create new user pattern with exampleName_n
-  even if 
-clicking (+) opens the "new" example with same behavior as above
-*/

From b03bf9ec3def256b2f643153fcafc56a3fa43919 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 8 Dec 2023 09:17:43 +0100
Subject: [PATCH 59/72] remove log

---
 website/src/settings.mjs | 1 -
 1 file changed, 1 deletion(-)

diff --git a/website/src/settings.mjs b/website/src/settings.mjs
index 67d386cf..eaed555b 100644
--- a/website/src/settings.mjs
+++ b/website/src/settings.mjs
@@ -187,6 +187,5 @@ export function duplicateActivePattern() {
 }
 
 export function setActivePattern(key) {
-  console.log('set', key);
   settingsMap.setKey('activePattern', key);
 }

From cec8553fb5e1eb03518bbddd8aea671d7cc39a41 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 8 Dec 2023 09:18:33 +0100
Subject: [PATCH 60/72] clear sounds + cps on pattern change + similar to
 shuffle

---
 website/src/repl/Repl.jsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/website/src/repl/Repl.jsx b/website/src/repl/Repl.jsx
index 3d3117ae..7813ae98 100644
--- a/website/src/repl/Repl.jsx
+++ b/website/src/repl/Repl.jsx
@@ -247,9 +247,15 @@ export function Repl({ embedded = false }) {
       stop();
     }
   };
-  const handleUpdate = (newCode) => {
+  const handleUpdate = async (newCode, reset = false) => {
+    if (reset) {
+      clearCanvas();
+      resetLoadedSounds();
+      scheduler.setCps(1);
+      await prebake(); // declare default samples
+    }
     (newCode || isDirty) && activateCode(newCode);
-    logger('[repl] code updated! tip: you can also update the code by pressing ctrl+enter', 'highlight');
+    logger('[repl] code updated!');
   };
 
   const handleShuffle = async () => {

From 10d86ff83522d3eef3df06247f52a0685dfd1ed3 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 8 Dec 2023 09:18:55 +0100
Subject: [PATCH 61/72] more style + set reset flag

---
 website/src/repl/panel/PatternsTab.jsx | 91 +++++++++++++++-----------
 1 file changed, 52 insertions(+), 39 deletions(-)

diff --git a/website/src/repl/panel/PatternsTab.jsx b/website/src/repl/panel/PatternsTab.jsx
index fba6fbc9..5cbfc3b3 100644
--- a/website/src/repl/panel/PatternsTab.jsx
+++ b/website/src/repl/panel/PatternsTab.jsx
@@ -9,7 +9,9 @@ import {
   duplicateActivePattern,
   getUserPattern,
   renameActivePattern,
+  addUserPattern,
 } from '../../settings.mjs';
+import { logger } from '@strudel.cycles/core';
 
 function classNames(...classes) {
   return classes.filter(Boolean).join(' ');
@@ -18,16 +20,16 @@ function classNames(...classes) {
 export function PatternsTab({ context }) {
   const { userPatterns, activePattern } = useSettings();
   return (
-    <div className="px-4 w-full text-foreground space-y-4">
+    <div className="px-4 w-full dark:text-white text-stone-900 space-y-4">
       <section>
         <h2 className="text-xl mb-2">Pattern Collection</h2>
-        <div className="space-x-4 border-b border-foreground mb-1">
+        <div className="space-x-4 border-b border-foreground mb-2 pb-1">
           <button
             className="hover:opacity-50"
             onClick={() => {
               const name = newUserPattern();
               const { code } = getUserPattern(name);
-              context.handleUpdate(code);
+              context.handleUpdate(code, true);
             }}
           >
             new
@@ -48,51 +50,62 @@ export function PatternsTab({ context }) {
             <input
               style={{ display: 'none' }}
               type="file"
-              directory=""
-              webkitdirectory=""
               multiple
-              accept="audio/*"
-              onChange={(e) => {
-                console.log('change', e.target.files);
+              accept="text/plain"
+              onChange={async (e) => {
+                const files = Array.from(e.target.files);
+                await Promise.all(
+                  files.map(async (file, i) => {
+                    const code = await file.text();
+                    const name = file.name.replace(/\.[^/.]+$/, '');
+                    console.log(i, name, code);
+                    addUserPattern(name, { code });
+                  }),
+                );
+                logger(`import done!`);
               }}
             />
             import
           </label>
         </div>
-        {Object.entries(userPatterns).map(([key, up]) => (
-          <a
-            key={key}
-            className={classNames(
-              'mr-4 hover:opacity-50 cursor-pointer inline-block',
-              key === activePattern ? 'underline' : '',
-            )}
-            onClick={() => {
-              const { code } = up;
-              setActivePattern(key);
-              context.handleUpdate(code);
-            }}
-          >
-            {key}
-          </a>
-        ))}
+        <div className="font-mono text-sm">
+          {Object.entries(userPatterns).map(([key, up]) => (
+            <a
+              key={key}
+              className={classNames(
+                'mr-4 hover:opacity-50 cursor-pointer inline-block',
+                key === activePattern ? 'outline outline-1' : '',
+              )}
+              onClick={() => {
+                const { code } = up;
+                setActivePattern(key);
+                context.handleUpdate(code, true);
+              }}
+            >
+              {key}
+            </a>
+          ))}
+        </div>
       </section>
       <section>
         <h2 className="text-xl mb-2">Examples</h2>
-        {Object.entries(tunes).map(([key, tune]) => (
-          <a
-            key={key}
-            className={classNames(
-              'mr-4 hover:opacity-50 cursor-pointer inline-block',
-              key === activePattern ? 'underline' : '',
-            )}
-            onClick={() => {
-              setActivePattern(key);
-              context.handleUpdate(tune);
-            }}
-          >
-            {key}
-          </a>
-        ))}
+        <div className="font-mono text-sm">
+          {Object.entries(tunes).map(([key, tune]) => (
+            <a
+              key={key}
+              className={classNames(
+                'mr-4 hover:opacity-50 cursor-pointer inline-block',
+                key === activePattern ? 'outline outline-1' : '',
+              )}
+              onClick={() => {
+                setActivePattern(key);
+                context.handleUpdate(tune, true);
+              }}
+            >
+              {key}
+            </a>
+          ))}
+        </div>
       </section>
     </div>
   );

From 8dd0e9600d51030dba058ae6947cb0cd67e65f7e Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 8 Dec 2023 09:20:42 +0100
Subject: [PATCH 62/72] add some padding

---
 website/src/repl/panel/PatternsTab.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/repl/panel/PatternsTab.jsx b/website/src/repl/panel/PatternsTab.jsx
index 5cbfc3b3..880134ce 100644
--- a/website/src/repl/panel/PatternsTab.jsx
+++ b/website/src/repl/panel/PatternsTab.jsx
@@ -20,7 +20,7 @@ function classNames(...classes) {
 export function PatternsTab({ context }) {
   const { userPatterns, activePattern } = useSettings();
   return (
-    <div className="px-4 w-full dark:text-white text-stone-900 space-y-4">
+    <div className="px-4 w-full dark:text-white text-stone-900 space-y-4 pb-4">
       <section>
         <h2 className="text-xl mb-2">Pattern Collection</h2>
         <div className="space-x-4 border-b border-foreground mb-2 pb-1">

From 31cd626820ea8b9b87ddba31082a490b06756f9d Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 8 Dec 2023 09:30:06 +0100
Subject: [PATCH 63/72] style sounds and patterns tab more consistently

---
 website/src/repl/panel/PatternsTab.jsx | 3 +--
 website/src/repl/panel/SoundsTab.jsx   | 6 +++---
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/website/src/repl/panel/PatternsTab.jsx b/website/src/repl/panel/PatternsTab.jsx
index 880134ce..37cac6f7 100644
--- a/website/src/repl/panel/PatternsTab.jsx
+++ b/website/src/repl/panel/PatternsTab.jsx
@@ -22,8 +22,7 @@ export function PatternsTab({ context }) {
   return (
     <div className="px-4 w-full dark:text-white text-stone-900 space-y-4 pb-4">
       <section>
-        <h2 className="text-xl mb-2">Pattern Collection</h2>
-        <div className="space-x-4 border-b border-foreground mb-2 pb-1">
+        <div className="px-4 space-x-4 border-b border-foreground mb-2 h-8">
           <button
             className="hover:opacity-50"
             onClick={() => {
diff --git a/website/src/repl/panel/SoundsTab.jsx b/website/src/repl/panel/SoundsTab.jsx
index aeda4f6d..fe32212d 100644
--- a/website/src/repl/panel/SoundsTab.jsx
+++ b/website/src/repl/panel/SoundsTab.jsx
@@ -42,8 +42,8 @@ export function SoundsTab() {
     });
   });
   return (
-    <div id="sounds-tab" className="flex flex-col w-full h-full dark:text-white text-stone-900">
-      <div className="px-2 pb-2 flex-none">
+    <div id="sounds-tab" className="px-4 flex flex-col w-full h-full dark:text-white text-stone-900">
+      <div className="pb-2 flex-none">
         <ButtonGroup
           value={soundsFilter}
           onChange={(value) => settingsMap.setKey('soundsFilter', value)}
@@ -55,7 +55,7 @@ export function SoundsTab() {
           }}
         ></ButtonGroup>
       </div>
-      <div className="p-2 min-h-0 max-h-full grow overflow-auto font-mono text-sm break-normal">
+      <div className="min-h-0 max-h-full grow overflow-auto font-mono text-sm break-normal">
         {soundEntries.map(([name, { data, onTrigger }]) => (
           <span
             key={name}

From 63a01088a0366392b4afc14a76f434cd77b5ef74 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 8 Dec 2023 11:42:15 +0100
Subject: [PATCH 64/72] hotfix: dont overwrite user pattern on shuffle

---
 website/src/repl/Repl.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/website/src/repl/Repl.jsx b/website/src/repl/Repl.jsx
index 7813ae98..a5bfffd4 100644
--- a/website/src/repl/Repl.jsx
+++ b/website/src/repl/Repl.jsx
@@ -17,7 +17,7 @@ import { prebake } from './prebake.mjs';
 import * as tunes from './tunes.mjs';
 import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon';
 import { themes } from './themes.mjs';
-import { settingsMap, useSettings, setLatestCode, updateUserCode } from '../settings.mjs';
+import { settingsMap, useSettings, setLatestCode, updateUserCode, setActivePattern } from '../settings.mjs';
 import Loader from './Loader';
 import { settingPatterns } from '../settings.mjs';
 import { code2hash, hash2code } from './helpers.mjs';
@@ -261,6 +261,7 @@ export function Repl({ embedded = false }) {
   const handleShuffle = async () => {
     const { code, name } = getRandomTune();
     logger(`[repl] ✨ loading random tune "${name}"`);
+    setActivePattern(name);
     clearCanvas();
     resetLoadedSounds();
     scheduler.setCps(1);

From 0ca4c1de0f9adc17511f94d457eb0712c42b53b0 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 8 Dec 2023 22:21:26 +0100
Subject: [PATCH 65/72] make sure new recent patterns are on top

---
 website/src/settings.mjs | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/website/src/settings.mjs b/website/src/settings.mjs
index eaed555b..d660b396 100644
--- a/website/src/settings.mjs
+++ b/website/src/settings.mjs
@@ -81,7 +81,7 @@ export function addUserPattern(name, config) {
     throw new Error('addUserPattern expected code as property of second param');
   }
   const userPatterns = getUserPatterns();
-  setUserPatterns({ ...userPatterns, [name]: config });
+  setUserPatterns({ [name]: config, ...userPatterns });
 }
 
 export function newUserPattern() {
@@ -152,7 +152,7 @@ export function updateUserCode(code) {
     activePattern = getNextCloneName(activePattern);
     setActivePattern(activePattern);
   }
-  setUserPatterns({ ...userPatterns, [activePattern]: { code } });
+  setUserPatterns({ [activePattern]: { code }, ...userPatterns });
 }
 
 export function deleteActivePattern() {
@@ -182,7 +182,7 @@ export function duplicateActivePattern() {
   }
   const userPatterns = getUserPatterns();
   activePattern = getNextCloneName(activePattern);
-  setUserPatterns({ ...userPatterns, [activePattern]: { code: latestCode } });
+  setUserPatterns({ [activePattern]: { code: latestCode }, ...userPatterns });
   setActivePattern(activePattern);
 }
 

From c1b7476f433d96ad204960f65991a333862a9e98 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 8 Dec 2023 22:22:07 +0100
Subject: [PATCH 66/72] + show active pattern at the top + move active pattern
 functions to top

---
 website/src/repl/panel/PatternsTab.jsx | 80 ++++++++++++++++----------
 1 file changed, 51 insertions(+), 29 deletions(-)

diff --git a/website/src/repl/panel/PatternsTab.jsx b/website/src/repl/panel/PatternsTab.jsx
index 37cac6f7..124ba400 100644
--- a/website/src/repl/panel/PatternsTab.jsx
+++ b/website/src/repl/panel/PatternsTab.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { useMemo } from 'react';
 import * as tunes from '../tunes.mjs';
 import {
   useSettings,
@@ -12,6 +12,7 @@ import {
   addUserPattern,
 } from '../../settings.mjs';
 import { logger } from '@strudel.cycles/core';
+import { DocumentDuplicateIcon, PencilSquareIcon, TrashIcon } from '@heroicons/react/20/solid';
 
 function classNames(...classes) {
   return classes.filter(Boolean).join(' ');
@@ -19,10 +20,50 @@ function classNames(...classes) {
 
 export function PatternsTab({ context }) {
   const { userPatterns, activePattern } = useSettings();
+  const isExample = useMemo(() => activePattern && !!tunes[activePattern], [activePattern]);
   return (
     <div className="px-4 w-full dark:text-white text-stone-900 space-y-4 pb-4">
       <section>
-        <div className="px-4 space-x-4 border-b border-foreground mb-2 h-8">
+        {activePattern && (
+          <div className="flex items-center mb-2 space-x-2 overflow-auto">
+            <h1 className="text-xl">{activePattern}</h1>
+            <div className="space-x-4 flex w-min">
+              <button className="hover:opacity-50" onClick={() => duplicateActivePattern()}>
+                <DocumentDuplicateIcon className="w-5 h-5" />
+              </button>
+              {!isExample && (
+                <button className="hover:opacity-50" onClick={() => renameActivePattern()}>
+                  <PencilSquareIcon className="w-5 h-5" />
+                  {/* <PencilIcon className="w-5 h-5" /> */}
+                </button>
+              )}
+              {!isExample && (
+                <button className="hover:opacity-50" onClick={() => deleteActivePattern()}>
+                  <TrashIcon className="w-5 h-5" />
+                </button>
+              )}
+            </div>
+          </div>
+        )}
+        <div className="font-mono text-sm">
+          {Object.entries(userPatterns).map(([key, up]) => (
+            <a
+              key={key}
+              className={classNames(
+                'mr-4 hover:opacity-50 cursor-pointer inline-block',
+                key === activePattern ? 'outline outline-1' : '',
+              )}
+              onClick={() => {
+                const { code } = up;
+                setActivePattern(key);
+                context.handleUpdate(code, true);
+              }}
+            >
+              {key}
+            </a>
+          ))}
+        </div>
+        <div className="pr-4 space-x-4 border-b border-foreground mb-2 h-8 flex overflow-auto max-w-full items-center">
           <button
             className="hover:opacity-50"
             onClick={() => {
@@ -33,15 +74,6 @@ export function PatternsTab({ context }) {
           >
             new
           </button>
-          <button className="hover:opacity-50" onClick={() => duplicateActivePattern()}>
-            duplicate
-          </button>
-          <button className="hover:opacity-50" onClick={() => renameActivePattern()}>
-            rename
-          </button>
-          <button className="hover:opacity-50" onClick={() => deleteActivePattern()}>
-            delete
-          </button>
           <button className="hover:opacity-50" onClick={() => clearUserPatterns()}>
             clear
           </button>
@@ -66,24 +98,14 @@ export function PatternsTab({ context }) {
             />
             import
           </label>
-        </div>
-        <div className="font-mono text-sm">
-          {Object.entries(userPatterns).map(([key, up]) => (
-            <a
-              key={key}
-              className={classNames(
-                'mr-4 hover:opacity-50 cursor-pointer inline-block',
-                key === activePattern ? 'outline outline-1' : '',
-              )}
-              onClick={() => {
-                const { code } = up;
-                setActivePattern(key);
-                context.handleUpdate(code, true);
-              }}
-            >
-              {key}
-            </a>
-          ))}
+          <button
+            className="hover:opacity-50"
+            onClick={() => {
+              console.log('export');
+            }}
+          >
+            export
+          </button>
         </div>
       </section>
       <section>

From a6f969614e9e080e28f6f2a6a8ae77149763e151 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 8 Dec 2023 22:24:49 +0100
Subject: [PATCH 67/72] fix: rename cancel

---
 website/src/settings.mjs | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/website/src/settings.mjs b/website/src/settings.mjs
index d660b396..620fb890 100644
--- a/website/src/settings.mjs
+++ b/website/src/settings.mjs
@@ -123,6 +123,10 @@ export function renameActivePattern() {
     return;
   }
   const newName = prompt('Enter new name', activePattern);
+  if (newName === null) {
+    // canceled
+    return;
+  }
   if (userPatterns[newName]) {
     alert('Name already taken!');
     return;

From 5116bf74ad267a244383ddf9474f7539820f8d96 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 8 Dec 2023 22:25:05 +0100
Subject: [PATCH 68/72] reorder pattern action buttons

---
 website/src/repl/panel/PatternsTab.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/website/src/repl/panel/PatternsTab.jsx b/website/src/repl/panel/PatternsTab.jsx
index 124ba400..def6cef1 100644
--- a/website/src/repl/panel/PatternsTab.jsx
+++ b/website/src/repl/panel/PatternsTab.jsx
@@ -28,15 +28,15 @@ export function PatternsTab({ context }) {
           <div className="flex items-center mb-2 space-x-2 overflow-auto">
             <h1 className="text-xl">{activePattern}</h1>
             <div className="space-x-4 flex w-min">
-              <button className="hover:opacity-50" onClick={() => duplicateActivePattern()}>
-                <DocumentDuplicateIcon className="w-5 h-5" />
-              </button>
               {!isExample && (
                 <button className="hover:opacity-50" onClick={() => renameActivePattern()}>
                   <PencilSquareIcon className="w-5 h-5" />
                   {/* <PencilIcon className="w-5 h-5" /> */}
                 </button>
               )}
+              <button className="hover:opacity-50" onClick={() => duplicateActivePattern()}>
+                <DocumentDuplicateIcon className="w-5 h-5" />
+              </button>
               {!isExample && (
                 <button className="hover:opacity-50" onClick={() => deleteActivePattern()}>
                   <TrashIcon className="w-5 h-5" />

From 8c89938eafd6499d2f5e9c4e1505033b0a281180 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 8 Dec 2023 23:07:30 +0100
Subject: [PATCH 69/72] pattern json export + import

---
 website/src/repl/panel/PatternsTab.jsx | 25 +++++++++++++++++++------
 website/src/settings.mjs               |  6 ++++--
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/website/src/repl/panel/PatternsTab.jsx b/website/src/repl/panel/PatternsTab.jsx
index def6cef1..4b1dfcf1 100644
--- a/website/src/repl/panel/PatternsTab.jsx
+++ b/website/src/repl/panel/PatternsTab.jsx
@@ -8,8 +8,10 @@ import {
   deleteActivePattern,
   duplicateActivePattern,
   getUserPattern,
+  getUserPatterns,
   renameActivePattern,
   addUserPattern,
+  setUserPatterns,
 } from '../../settings.mjs';
 import { logger } from '@strudel.cycles/core';
 import { DocumentDuplicateIcon, PencilSquareIcon, TrashIcon } from '@heroicons/react/20/solid';
@@ -82,15 +84,19 @@ export function PatternsTab({ context }) {
               style={{ display: 'none' }}
               type="file"
               multiple
-              accept="text/plain"
+              accept="text/plain,application/json"
               onChange={async (e) => {
                 const files = Array.from(e.target.files);
                 await Promise.all(
                   files.map(async (file, i) => {
-                    const code = await file.text();
-                    const name = file.name.replace(/\.[^/.]+$/, '');
-                    console.log(i, name, code);
-                    addUserPattern(name, { code });
+                    const content = await file.text();
+                    if (file.type === 'application/json') {
+                      const userPatterns = getUserPatterns() || {};
+                      setUserPatterns({ ...userPatterns, ...JSON.parse(content) });
+                    } else if (file.type === 'text/plain') {
+                      const name = file.name.replace(/\.[^/.]+$/, '');
+                      addUserPattern(name, { code: content });
+                    }
                   }),
                 );
                 logger(`import done!`);
@@ -101,7 +107,14 @@ export function PatternsTab({ context }) {
           <button
             className="hover:opacity-50"
             onClick={() => {
-              console.log('export');
+              const blob = new Blob([JSON.stringify(userPatterns)], { type: 'application/json' });
+              const downloadLink = document.createElement('a');
+              downloadLink.href = window.URL.createObjectURL(blob);
+              const date = new Date().toISOString().split('T')[0];
+              downloadLink.download = `strudel_patterns_${date}.json`;
+              document.body.appendChild(downloadLink);
+              downloadLink.click();
+              document.body.removeChild(downloadLink);
             }}
           >
             export
diff --git a/website/src/settings.mjs b/website/src/settings.mjs
index 620fb890..cf8a7cee 100644
--- a/website/src/settings.mjs
+++ b/website/src/settings.mjs
@@ -62,14 +62,14 @@ export const fontSize = patternSetting('fontSize');
 
 export const settingPatterns = { theme, fontFamily, fontSize };
 
-function getUserPatterns() {
+export function getUserPatterns() {
   return JSON.parse(settingsMap.get().userPatterns);
 }
 function getSetting(key) {
   return settingsMap.get()[key];
 }
 
-function setUserPatterns(obj) {
+export function setUserPatterns(obj) {
   settingsMap.setKey('userPatterns', JSON.stringify(obj));
 }
 
@@ -193,3 +193,5 @@ export function duplicateActivePattern() {
 export function setActivePattern(key) {
   settingsMap.setKey('activePattern', key);
 }
+
+export function importUserPatternJSON(jsonString) {}

From 37a13d1a00197a132da22688dae109b638334dd2 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 8 Dec 2023 23:09:24 +0100
Subject: [PATCH 70/72] add tooltips

---
 website/src/repl/panel/PatternsTab.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/website/src/repl/panel/PatternsTab.jsx b/website/src/repl/panel/PatternsTab.jsx
index 4b1dfcf1..175ed887 100644
--- a/website/src/repl/panel/PatternsTab.jsx
+++ b/website/src/repl/panel/PatternsTab.jsx
@@ -31,16 +31,16 @@ export function PatternsTab({ context }) {
             <h1 className="text-xl">{activePattern}</h1>
             <div className="space-x-4 flex w-min">
               {!isExample && (
-                <button className="hover:opacity-50" onClick={() => renameActivePattern()}>
+                <button className="hover:opacity-50" onClick={() => renameActivePattern()} title="Rename">
                   <PencilSquareIcon className="w-5 h-5" />
                   {/* <PencilIcon className="w-5 h-5" /> */}
                 </button>
               )}
-              <button className="hover:opacity-50" onClick={() => duplicateActivePattern()}>
+              <button className="hover:opacity-50" onClick={() => duplicateActivePattern()} title="Duplicate">
                 <DocumentDuplicateIcon className="w-5 h-5" />
               </button>
               {!isExample && (
-                <button className="hover:opacity-50" onClick={() => deleteActivePattern()}>
+                <button className="hover:opacity-50" onClick={() => deleteActivePattern()} title="Delete">
                   <TrashIcon className="w-5 h-5" />
                 </button>
               )}

From 6969800192ae2e34974f44ff616375991e866aef Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Sat, 9 Dec 2023 17:23:24 +0100
Subject: [PATCH 71/72] fix: update button bug

---
 website/src/repl/Header.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/repl/Header.jsx b/website/src/repl/Header.jsx
index 5e991f8a..b6f13060 100644
--- a/website/src/repl/Header.jsx
+++ b/website/src/repl/Header.jsx
@@ -87,7 +87,7 @@ export function Header({ context }) {
             )}
           </button>
           <button
-            onClick={handleUpdate}
+            onClick={() => handleUpdate()}
             title="update"
             className={cx(
               'flex items-center space-x-1',

From 845571a7161a47361324e9b1c1cdd805442677db Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Sat, 9 Dec 2023 23:54:49 +0100
Subject: [PATCH 72/72] hotfix: pattern save was broken :-/

---
 website/src/settings.mjs | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/website/src/settings.mjs b/website/src/settings.mjs
index cf8a7cee..98d3fe50 100644
--- a/website/src/settings.mjs
+++ b/website/src/settings.mjs
@@ -81,7 +81,7 @@ export function addUserPattern(name, config) {
     throw new Error('addUserPattern expected code as property of second param');
   }
   const userPatterns = getUserPatterns();
-  setUserPatterns({ [name]: config, ...userPatterns });
+  setUserPatterns({ ...userPatterns, [name]: config });
 }
 
 export function newUserPattern() {
@@ -156,7 +156,7 @@ export function updateUserCode(code) {
     activePattern = getNextCloneName(activePattern);
     setActivePattern(activePattern);
   }
-  setUserPatterns({ [activePattern]: { code }, ...userPatterns });
+  setUserPatterns({ ...userPatterns, [activePattern]: { code } });
 }
 
 export function deleteActivePattern() {
@@ -186,7 +186,7 @@ export function duplicateActivePattern() {
   }
   const userPatterns = getUserPatterns();
   activePattern = getNextCloneName(activePattern);
-  setUserPatterns({ [activePattern]: { code: latestCode }, ...userPatterns });
+  setUserPatterns({ ...userPatterns, [activePattern]: { code: latestCode } });
   setActivePattern(activePattern);
 }