Merge branch 'main' into audio_device_selection

2026-07-24 05:57:17 -04:00 · 2023-12-18 00:22:33 -05:00
parent 000e1293db 466574a856
commit 355ac2ea29
45 changed files with 2510 additions and 295 deletions
@@ -0,0 +1,58 @@
+---
+import { pwaInfo } from 'virtual:pwa-info';
+import '../styles/index.css';
+
+const { BASE_URL } = import.meta.env;
+const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
+---
+
+<!-- Global Metadata -->
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width" />
+<meta name="generator" content={Astro.generator} />
+
+<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={`${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_URL} />
+
+<!-- Scrollable a11y code helper -->
+<script src{`${baseNoTrailing}/make-scrollable-code-focusable.js`} is:inline></script>
+
+<script src="/src/pwa.ts"></script>
+<!-- this does not work for some reason: -->
+<!-- <style is:global define:vars={strudelTheme}></style> -->
+<!-- the following variables are just a fallback to make sure everything is readable without JS -->
+<style is:global>
+  :root {
+    --background: #222;
+    --lineBackground: #22222299;
+    --foreground: #fff;
+    --caret: #ffcc00;
+    --selection: rgba(128, 203, 196, 0.5);
+    --selectionMatch: #036dd626;
+    --lineHighlight: #00000050;
+    --gutterBackground: transparent;
+    --gutterForeground: #8a919966;
+  }
+</style>
+{pwaInfo && <Fragment set:html={pwaInfo.webManifest.linkTag} />}
+
+<script>
+  // https://medium.com/quick-code/100vh-problem-with-ios-safari-92ab23c852a8
+  const appHeight = () => {
+    const doc = document.documentElement;
+    doc.style.setProperty('--app-height', `${window.innerHeight - 1}px`);
+  };
+  if (typeof window !== 'undefined') {
+    window.addEventListener('resize', appHeight);
+    appHeight();
+  }
+</script>
@@ -37,4 +37,4 @@ What about combining different notes with different sounds at the same time?

 Hmm, something interesting is going on there, related to there being five notes and three sounds.

-Let's now take a step back and think about the Strudel [Code](/learn/code) we've been hearing so far.
+Let's now take a step back and think about the Strudel [Code](/learn/code/) we've been hearing so far.
@@ -64,4 +64,4 @@ Together with layer, struct and voicings, this can be used to create a basic bac
 )`}
 />

-So far, we've stayed within the browser. [MIDI and OSC](/learn/input-output) are ways to break out of it.
+So far, we've stayed within the browser. [MIDI and OSC](/learn/input-output/) are ways to break out of it.
@@ -0,0 +1,96 @@
+---
+import HeadCommonNew from '../../components/HeadCommonNew.astro';
+---
+
+<html lang="en" class="dark">
+  <head>
+    <HeadCommonNew />
+    <title>Strudel Vanilla REPL</title>
+  </head>
+  <body class="h-app-height">
+    <div class="settings">
+      <form name="settings" class="flex flex-col space-y-1 bg-[#00000080]">
+        <label
+          >theme
+          <select name="theme">
+            <option>strudelTheme</option>
+            <option>bluescreen</option>
+            <option>blackscreen</option>
+            <option>whitescreen</option>
+            <option>teletext</option>
+            <option>algoboy</option>
+            <option>terminal</option>
+            <option>abcdef</option>
+            <option>androidstudio</option>
+            <option>atomone</option>
+            <option>aura</option>
+            <option>bespin</option>
+            <option>darcula</option>
+            <option>dracula</option>
+            <option>duotoneDark</option>
+            <option>eclipse</option>
+            <option>githubDark</option>
+            <option>gruvboxDark</option>
+            <option>materialDark</option>
+            <option>nord</option>
+            <option>okaidia</option>
+            <option>solarizedDark</option>
+            <option>sublime</option>
+            <option>tokyoNight</option>
+            <option>tokyoNightStorm</option>
+            <option>vscodeDark</option>
+            <option>xcodeDark</option>
+            <option>bbedit</option>
+            <option>duotoneLight</option>
+            <option>githubLight</option>
+            <option>gruvboxLight</option>
+            <option>materialLight</option>
+            <option>noctisLilac</option>
+            <option>solarizedLight</option>
+            <option>tokyoNightDay</option>
+            <option>xcodeLight</option>
+          </select> </label
+        ><br />
+        <label
+          >keybindings
+          <select name="keybindings">
+            <option>codemirror</option>
+            <option>vim</option>
+            <option>emacs</option>
+            <option>vscode</option>
+          </select> </label
+        ><br />
+        <label>fontFamily
+          <select name="fontFamily">
+            <option value="monospace">monospace</option>
+            <option value="BigBlueTerminal">BigBlueTerminal</option>
+            <option value="x3270">x3270</option>
+            <option value="PressStart">PressStart2P</option>
+            <option value="galactico">galactico</option>
+            <option value="we-come-in-peace">we-come-in-peace</option>
+            <option value="FiraCode">FiraCode</option>
+            <option value="FiraCode-SemiBold">FiraCode-SemiBold</option>
+            <option value="teletext">teletext</option>
+            <option value="mode7">mode7</option>
+          </select>
+        </label>
+        <br /> 
+        <label>fontSize <input type="number" name="fontSize" /></label>
+        <br />
+        <label><input type="checkbox" name="isLineNumbersDisplayed" />isLineNumbersDisplayed</label>
+        <br />
+        <label><input type="checkbox" name="isActiveLineHighlighted" />isActiveLineHighlighted</label>
+        <br />
+        <label><input type="checkbox" name="isPatternHighlightingEnabled" />isPatternHighlightingEnabled</label>
+        <br />
+        <label><input type="checkbox" name="isFlashEnabled" />isFlashEnabled</label>
+        <br />
+        <label><input type="checkbox" name="isLineWrappingEnabled" />isLineWrappingEnabled</label>
+        <!-- <label><input type="checkbox" name="isAutoCompletionEnabled" />isAutoCompletionEnabled</label> -->
+        <!-- <label><input type="checkbox" name="isTooltipEnabled" />isTooltipEnabled</label> -->
+      </form>
+    </div>
+    <div id="code"></div>
+    <script src="../../repl/vanilla/vanilla.mjs"></script>
+  </body>
+</html>
@@ -4,7 +4,16 @@ 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 { cleanupDraw, cleanupUi, controls, evalScope, getDrawContext, logger } from '@strudel.cycles/core';
+import {
+  cleanupDraw,
+  cleanupUi,
+  controls,
+  evalScope,
+  getDrawContext,
+  logger,
+  code2hash,
+  hash2code,
+} from '@strudel.cycles/core';
 import { CodeMirror, cx, flash, useHighlighting, useStrudel, useKeydown } from '@strudel.cycles/react';
 import { getAudioContext, initAudioOnFirstClick, resetLoadedSounds, webaudioOutput } from '@strudel.cycles/webaudio';
 import { createClient } from '@supabase/supabase-js';
@@ -17,14 +26,24 @@ 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, setActivePattern } from '../settings.mjs';
+import {
+  settingsMap,
+  useSettings,
+  setLatestCode,
+  updateUserCode,
+  setActivePattern,
+  getActivePattern,
+  getUserPattern,
+  initUserCode,
+} from '../settings.mjs';
 import Loader from './Loader';
 import { settingPatterns } from '../settings.mjs';
-import { code2hash, hash2code } from './helpers.mjs';
 import { isTauri } from '../tauri.mjs';
 import { useWidgets } from '@strudel.cycles/react/src/hooks/useWidgets.mjs';
 import { writeText } from '@tauri-apps/api/clipboard';
 import { defaultAudioDeviceName, getAudioDevices, setAudioDevice } from './panel/AudioDeviceSelector';
+import { registerSamplesFromDB, userSamplesDBConfig } from './idbutils.mjs';
+

 const { latestCode } = settingsMap.get();

@@ -132,6 +151,7 @@ export function Repl({ embedded = false }) {
    isLineWrappingEnabled,
    panelPosition,
    isZen,
+    audio_device_selection,
    activePattern,
    audioDeviceName,
  } = useSettings();
@@ -180,6 +200,7 @@ export function Repl({ embedded = false }) {
      let msg;
      if (decoded) {
        setCode(decoded);
+        initUserCode(decoded);
        msg = `I have loaded the code from the URL.`;
      } else if (latestCode) {
        setCode(latestCode);
@@ -188,6 +209,8 @@ export function Repl({ embedded = false }) {
        setCode(randomTune);
        msg = `A random code snippet named "${name}" has been loaded!`;
      }
+      //registers samples that have been saved to the index DB
+      registerSamplesFromDB(userSamplesDBConfig);
      logger(`Welcome to Strudel! ${msg} Press play or hit ctrl+enter to run it!`, 'highlight');
      setPending(false);
    });
@@ -1,25 +0,0 @@
-export function unicodeToBase64(text) {
-  const utf8Bytes = new TextEncoder().encode(text);
-  const base64String = btoa(String.fromCharCode(...utf8Bytes));
-  return base64String;
-}
-
-export function base64ToUnicode(base64String) {
-  const utf8Bytes = new Uint8Array(
-    atob(base64String)
-      .split('')
-      .map((char) => char.charCodeAt(0)),
-  );
-  const decodedText = new TextDecoder().decode(utf8Bytes);
-  return decodedText;
-}
-
-export function code2hash(code) {
-  return encodeURIComponent(unicodeToBase64(code));
-  //return '#' + encodeURIComponent(btoa(code));
-}
-
-export function hash2code(hash) {
-  return base64ToUnicode(decodeURIComponent(hash));
-  //return atob(decodeURIComponent(codeParam || ''));
-}
@@ -0,0 +1,148 @@
+import { registerSound, onTriggerSample } from '@strudel.cycles/webaudio';
+import { isAudioFile } from './files.mjs';
+import { logger } from '@strudel.cycles/core';
+
+//utilites for writing and reading to the indexdb
+
+export const userSamplesDBConfig = {
+  dbName: 'samples',
+  table: 'usersamples',
+  columns: ['blob', 'title'],
+  version: 1,
+};
+
+// deletes all of the databases, useful for debugging
+const clearIDB = () => {
+  window.indexedDB
+    .databases()
+    .then((r) => {
+      for (var i = 0; i < r.length; i++) window.indexedDB.deleteDatabase(r[i].name);
+    })
+    .then(() => {
+      alert('All data cleared.');
+    });
+};
+
+// queries the DB, and registers the sounds so they can be played
+export const registerSamplesFromDB = (config, onComplete = () => {}) => {
+  openDB(config, (objectStore) => {
+    let query = objectStore.getAll();
+    query.onsuccess = (event) => {
+      const soundFiles = event.target.result;
+      if (!soundFiles?.length) {
+        return;
+      }
+      const sounds = new Map();
+      [...soundFiles]
+        .sort((a, b) => a.title.localeCompare(b.title, undefined, { numeric: true, sensitivity: 'base' }))
+        .forEach((soundFile) => {
+          const title = soundFile.title;
+          if (!isAudioFile(title)) {
+            return;
+          }
+          const splitRelativePath = soundFile.id?.split('/');
+          const parentDirectory = splitRelativePath[splitRelativePath.length - 2];
+          const soundPath = soundFile.blob;
+          const soundPaths = sounds.get(parentDirectory) ?? new Set();
+          soundPaths.add(soundPath);
+          sounds.set(parentDirectory, soundPaths);
+        });
+
+      sounds.forEach((soundPaths, key) => {
+        const value = Array.from(soundPaths);
+        registerSound(key, (t, hapValue, onended) => onTriggerSample(t, hapValue, onended, value), {
+          type: 'sample',
+          samples: value,
+          baseUrl: undefined,
+          prebake: false,
+          tag: undefined,
+        });
+      });
+      logger('imported sounds registered!', 'success');
+      onComplete();
+    };
+  });
+};
+// creates a blob from a buffer that can be read
+async function bufferToDataUrl(buf) {
+  return new Promise((resolve) => {
+    var blob = new Blob([buf], { type: 'application/octet-binary' });
+    var reader = new FileReader();
+    reader.onload = function (event) {
+      resolve(event.target.result);
+    };
+    reader.readAsDataURL(blob);
+  });
+}
+//open db and initialize it if necessary
+const openDB = (config, onOpened) => {
+  const { dbName, version, table, columns } = config;
+  if (!('indexedDB' in window)) {
+    console.log('IndexedDB is not supported.');
+    return;
+  }
+  const dbOpen = indexedDB.open(dbName, version);
+
+  dbOpen.onupgradeneeded = (_event) => {
+    const db = dbOpen.result;
+    const objectStore = db.createObjectStore(table, { keyPath: 'id', autoIncrement: false });
+    columns.forEach((c) => {
+      objectStore.createIndex(c, c, { unique: false });
+    });
+  };
+  dbOpen.onerror = (err) => {
+    logger('Something went wrong while trying to open the the client DB', 'error');
+    console.error(`indexedDB error: ${err.errorCode}`);
+  };
+
+  dbOpen.onsuccess = () => {
+    const db = dbOpen.result;
+
+    const // lock store for writing
+      writeTransaction = db.transaction([table], 'readwrite'),
+      // get object store
+      objectStore = writeTransaction.objectStore(table);
+    onOpened(objectStore, db);
+  };
+};
+
+const processFilesForIDB = async (files) => {
+  return await Promise.all(
+    Array.from(files)
+      .map(async (s) => {
+        const title = s.name;
+        if (!isAudioFile(title)) {
+          return;
+        }
+        //create obscured url to file system that can be fetched
+        const sUrl = URL.createObjectURL(s);
+        //fetch the sound and turn it into a buffer array
+        const buf = await fetch(sUrl).then((res) => res.arrayBuffer());
+        //create a url blob containing all of the buffer data
+        const base64 = await bufferToDataUrl(buf);
+        return {
+          title,
+          blob: base64,
+          id: s.webkitRelativePath,
+        };
+      })
+      .filter(Boolean),
+  ).catch((error) => {
+    logger('Something went wrong while processing uploaded files', 'error');
+    console.error(error);
+  });
+};
+
+export const uploadSamplesToDB = async (config, files) => {
+  await processFilesForIDB(files).then((files) => {
+    const onOpened = (objectStore, _db) => {
+      files.forEach((file) => {
+        if (file == null) {
+          return;
+        }
+        objectStore.put(file);
+      });
+    };
+    openDB(config, onOpened);
+  });
+};
@@ -9,7 +9,7 @@ export function ButtonGroup({ value, onChange, items }) {
          key={key}
          onClick={() => onChange(key)}
          className={cx(
-            'px-2 border-b h-8',
+            'px-2 border-b h-8 whitespace-nowrap',
            // i === 0 && 'rounded-l-md',
            // i === arr.length - 1 && 'rounded-r-md',
            // value === key ? 'bg-background' : 'bg-lineHighlight',
@@ -0,0 +1,43 @@
+import React, { useCallback, useState } from 'react';
+import { registerSamplesFromDB, uploadSamplesToDB, userSamplesDBConfig } from '../idbutils.mjs';
+
+//choose a directory to locally import samples
+export default function ImportSoundsButton({ onComplete }) {
+  let fileUploadRef = React.createRef();
+  const [isUploading, setIsUploading] = useState(false);
+  const onChange = useCallback(async () => {
+    if (!fileUploadRef.current.files?.length) {
+      return;
+    }
+    setIsUploading(true);
+    await uploadSamplesToDB(userSamplesDBConfig, fileUploadRef.current.files).then(() => {
+      registerSamplesFromDB(userSamplesDBConfig, () => {
+        onComplete();
+        setIsUploading(false);
+      });
+    });
+  });
+
+  return (
+    <label
+      style={{ alignItems: 'center' }}
+      className="flex bg-background ml-2 pl-2 pr-2 max-w-[300px] rounded-md hover:opacity-50 whitespace-nowrap cursor-pointer"
+    >
+      <input
+        disabled={isUploading}
+        ref={fileUploadRef}
+        id="audio_file"
+        style={{ display: 'none' }}
+        type="file"
+        directory=""
+        webkitdirectory=""
+        multiple
+        accept="audio/*"
+        onChange={() => {
+          onChange();
+        }}
+      />
+      {isUploading ? 'importing...' : 'import sounds'}
+    </label>
+  );
+}
@@ -1,27 +1,27 @@
+import { DocumentDuplicateIcon, PencilSquareIcon, TrashIcon } from '@heroicons/react/20/solid';
 import { useMemo } from 'react';
-import * as tunes from '../tunes.mjs';
 import {
-  useSettings,
  clearUserPatterns,
-  newUserPattern,
-  setActivePattern,
  deleteActivePattern,
  duplicateActivePattern,
+  exportPatterns,
  getUserPattern,
-  getUserPatterns,
+  importPatterns,
+  newUserPattern,
  renameActivePattern,
-  addUserPattern,
-  setUserPatterns,
+  setActivePattern,
+  useActivePattern,
+  useSettings,
 } from '../../settings.mjs';
-import { logger } from '@strudel.cycles/core';
-import { DocumentDuplicateIcon, PencilSquareIcon, TrashIcon } from '@heroicons/react/20/solid';
+import * as tunes from '../tunes.mjs';

 function classNames(...classes) {
  return classes.filter(Boolean).join(' ');
 }

 export function PatternsTab({ context }) {
-  const { userPatterns, activePattern } = useSettings();
+  const { userPatterns } = useSettings();
+  const activePattern = useActivePattern();
  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">
@@ -85,38 +85,11 @@ export function PatternsTab({ context }) {
              type="file"
              multiple
              accept="text/plain,application/json"
-              onChange={async (e) => {
-                const files = Array.from(e.target.files);
-                await Promise.all(
-                  files.map(async (file, i) => {
-                    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!`);
-              }}
+              onChange={(e) => importPatterns(e.target.files)}
            />
            import
          </label>
-          <button
-            className="hover:opacity-50"
-            onClick={() => {
-              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);
-            }}
-          >
+          <button className="hover:opacity-50" onClick={() => exportPatterns()}>
            export
          </button>
        </div>
@@ -5,6 +5,7 @@ import { getAudioContext, soundMap, connectToDestination } from '@strudel.cycles
 import React, { useMemo, useRef } from 'react';
 import { settingsMap, useSettings } from '../../settings.mjs';
 import { ButtonGroup } from './Forms.jsx';
+import ImportSoundsButton from './ImportSoundsButton.jsx';

 const getSamples = (samples) =>
  Array.isArray(samples) ? samples.length : typeof samples === 'object' ? Object.values(samples).length : 1;
@@ -43,7 +44,7 @@ export function SoundsTab() {
  });
  return (
    <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">
+      <div className="pb-2 flex shrink-0 overflow-auto">
        <ButtonGroup
          value={soundsFilter}
          onChange={(value) => settingsMap.setKey('soundsFilter', value)}
@@ -54,6 +55,7 @@ export function SoundsTab() {
            user: 'User',
          }}
        ></ButtonGroup>
+        <ImportSoundsButton onComplete={() => settingsMap.setKey('soundsFilter', 'user')} />
      </div>
      <div className="min-h-0 max-h-full grow overflow-auto font-mono text-sm break-normal">
        {soundEntries.map(([name, { data, onTrigger }]) => (
@@ -114,6 +114,9 @@ export async function prebake() {
        ],
      },
      'github:tidalcycles/Dirt-Samples/master/',
+      {
+        prebake: true,
+      },
    ),
  ]);
  // await samples('github:tidalcycles/Dirt-Samples/master');
@@ -0,0 +1,34 @@
+body,
+input {
+  font-family: monospace;
+  background-color: black;
+  color: white;
+}
+
+input,
+select {
+  background-color: black !important;
+}
+
+html,
+body,
+#code,
+.cm-editor,
+.cm-scroller {
+  padding: 0;
+  margin: 0;
+  height: 100%;
+}
+
+.settings {
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 1000;
+  display: flex-col;
+  padding: 10px;
+}
+
+.settings > form > * + * {
+  margin-top: 10px;
+}
@@ -0,0 +1,202 @@
+import { logger, getDrawContext, silence, controls, evalScope, hash2code, code2hash } from '@strudel.cycles/core';
+import { StrudelMirror, initTheme, activateTheme } from '@strudel/codemirror';
+import { transpiler } from '@strudel.cycles/transpiler';
+import {
+  getAudioContext,
+  webaudioOutput,
+  registerSynthSounds,
+  registerZZFXSounds,
+  samples,
+} from '@strudel.cycles/webaudio';
+import './vanilla.css';
+
+let editor;
+const initialSettings = {
+  keybindings: 'codemirror',
+  isLineNumbersDisplayed: true,
+  isActiveLineHighlighted: true,
+  isAutoCompletionEnabled: false,
+  isPatternHighlightingEnabled: true,
+  isFlashEnabled: true,
+  isTooltipEnabled: false,
+  isLineWrappingEnabled: false,
+  theme: 'teletext',
+  fontFamily: 'monospace',
+  fontSize: 18,
+};
+initTheme(initialSettings.theme);
+
+async function run() {
+  const container = document.getElementById('code');
+  if (!container) {
+    console.warn('could not init: no container found');
+    return;
+  }
+
+  const drawContext = getDrawContext();
+  const drawTime = [-2, 2];
+  editor = new StrudelMirror({
+    defaultOutput: webaudioOutput,
+    getTime: () => getAudioContext().currentTime,
+    transpiler,
+    root: container,
+    initialCode: '// LOADING',
+    pattern: silence,
+    settings: initialSettings,
+    drawTime,
+    onDraw: (haps, time, frame, painters) => {
+      painters.length && drawContext.clearRect(0, 0, drawContext.canvas.width * 2, drawContext.canvas.height * 2);
+      painters?.forEach((painter) => {
+        // ctx time haps drawTime paintOptions
+        painter(drawContext, time, haps, drawTime, { clear: false });
+      });
+    },
+    prebake: async () => {
+      // populate scope / lazy load modules
+      const modulesLoading = evalScope(
+        import('@strudel.cycles/core'),
+        import('@strudel.cycles/tonal'),
+        import('@strudel.cycles/mini'),
+        // import('@strudel.cycles/xen'),
+        import('@strudel.cycles/webaudio'),
+        import('@strudel/codemirror'),
+        /* import('@strudel/hydra'), */
+        // import('@strudel.cycles/serial'),
+        /* import('@strudel.cycles/soundfonts'), */
+        // import('@strudel.cycles/csound'),
+        /* import('@strudel.cycles/midi'), */
+        // import('@strudel.cycles/osc'),
+        controls, // sadly, this cannot be exported from core directly (yet)
+      );
+      // load samples
+      const ds = 'https://raw.githubusercontent.com/felixroos/dough-samples/main/';
+      await Promise.all([
+        modulesLoading,
+        registerSynthSounds(),
+        registerZZFXSounds(),
+        samples(`${ds}/tidal-drum-machines.json`),
+        samples(`${ds}/piano.json`),
+        samples(`${ds}/Dirt-Samples.json`),
+        samples(`${ds}/EmuSP12.json`),
+        samples(`${ds}/vcsl.json`),
+      ]);
+    },
+    afterEval: ({ code }) => {
+      window.location.hash = '#' + code2hash(code);
+    },
+  });
+
+  // init settings
+  editor.updateSettings(initialSettings);
+
+  logger(`Welcome to Strudel! Click into the editor and then hit ctrl+enter to run the code!`, 'highlight');
+  const codeParam = window.location.href.split('#')[1] || '';
+
+  const initialCode = codeParam
+    ? hash2code(codeParam)
+    : `// @date 23-11-30
+// "teigrührgerät" @by froos
+
+stack(
+  stack(
+    s("bd(<3!3 5>,6)/2").bank('RolandTR707')
+    ,
+    s("~ sd:<0 1>").bank('RolandTR707').room("<0 .5>")
+    .lastOf(8, x=>x.segment("12").end(.2).gain(isaw))
+    ,
+    s("[tb ~ tb]").bank('RolandTR707')
+    .clip(0).release(.08).room(.2)
+  ).off(-1/6, x=>x.speed(.7).gain(.2).degrade())
+  ,
+  stack(
+    note("<g1(<3 4>,6) ~!2 [f1?]*2>")
+    .s("sawtooth").lpf(perlin.range(400,1000))
+    .lpa(.1).lpenv(-3).room(.2)
+    .lpq(8).noise(.2)
+    .add(note("0,.1"))
+    ,
+    chord("<~ Gm9 ~!2>")
+    .dict('ireal').voicing()
+    .s("sawtooth").vib("2:.1")
+    .lpf(1000).lpa(.1).lpenv(-4)
+    .room(.5)
+    ,
+    n(run(3)).chord("<Gm9 Gm11>/8")
+    .dict('ireal-ext')
+    .off(1/2, add(n(4)))
+    .voicing()
+    .clip(.1).release(.05)
+    .s("sine").jux(rev)
+    .sometimesBy(sine.slow(16), add(note(12)))
+    .room(.75)
+    .lpf(sine.range(200,2000).slow(16))
+    .gain(saw.slow(4).div(2))
+  ).add(note(perlin.range(0,.5)))
+)`;
+
+  editor.setCode(initialCode); // simpler alternative to above init
+
+  // settingsMap.listen((settings, key) => editor.changeSetting(key, settings[key]));
+  onEvent('strudel-toggle-play', () => editor.toggle());
+}
+
+run();
+
+function onEvent(key, callback) {
+  const listener = (e) => {
+    if (e.data === key) {
+      callback();
+    }
+  };
+  window.addEventListener('message', listener);
+  return () => window.removeEventListener('message', listener);
+}
+
+// settings form
+function getInput(form, name) {
+  return form.querySelector(`input[name=${name}]`) || form.querySelector(`select[name=${name}]`);
+}
+function getFormValues(form, initial) {
+  const entries = Object.entries(initial).map(([key, initialValue]) => {
+    const input = getInput(form, key);
+    if (!input) {
+      return [key, initialValue]; // fallback
+    }
+    if (input.type === 'checkbox') {
+      return [key, input.checked];
+    }
+    if (input.type === 'number') {
+      return [key, Number(input.value)];
+    }
+    if (input.tagName === 'SELECT') {
+      return [key, input.value];
+    }
+    return [key, input.value];
+  });
+  return Object.fromEntries(entries);
+}
+function setFormValues(form, values) {
+  Object.entries(values).forEach(([key, value]) => {
+    const input = getInput(form, key);
+    if (!input) {
+      return;
+    }
+    if (input.type === 'checkbox') {
+      input.checked = !!value;
+    } else if (input.type === 'number') {
+      input.value = value;
+    } else if (input.tagName) {
+      input.value = value;
+    }
+  });
+}
+
+const form = document.querySelector('form[name=settings]');
+setFormValues(form, initialSettings);
+form.addEventListener('change', () => {
+  const values = getFormValues(form, initialSettings);
+  // console.log('values', values);
+  editor.updateSettings(values);
+  // TODO: only activateTheme when it changes
+  activateTheme(values.theme);
+});
@@ -1,9 +1,13 @@
-import { persistentMap } from '@nanostores/persistent';
+import { persistentMap, persistentAtom } from '@nanostores/persistent';
 import { useStore } from '@nanostores/react';
 import { register } from '@strudel.cycles/core';
 import * as tunes from './repl/tunes.mjs';
+
 import { defaultAudioDeviceName } from './repl/panel/AudioDeviceSelector';

+import { logger } from '@strudel.cycles/core';
+
+
 export const defaultSettings = {
  activeFooter: 'intro',
  keybindings: 'codemirror',
@@ -26,6 +30,24 @@ export const defaultSettings = {

 export const settingsMap = persistentMap('strudel-settings', defaultSettings);

+// active pattern is separate, because it shouldn't sync state across tabs
+// reason: https://github.com/tidalcycles/strudel/issues/857
+const $activePattern = persistentAtom('activePattern', '', { listen: false });
+export function setActivePattern(key) {
+  $activePattern.set(key);
+}
+export function getActivePattern() {
+  return $activePattern.get();
+}
+export function useActivePattern() {
+  return useStore($activePattern);
+}
+export function initUserCode(code) {
+  const userPatterns = getUserPatterns();
+  const match = Object.entries(userPatterns).find(([_, pat]) => pat.code === code);
+  setActivePattern(match?.[0] || '');
+}
+
 export function useSettings() {
  const state = useStore(settingsMap);
  return {
@@ -118,7 +140,7 @@ export function getUserPattern(key) {
 }

 export function renameActivePattern() {
-  let activePattern = getSetting('activePattern');
+  let activePattern = getActivePattern();
  let userPatterns = getUserPatterns();
  if (!userPatterns[activePattern]) {
    alert('Cannot rename examples');
@@ -141,7 +163,7 @@ export function renameActivePattern() {

 export function updateUserCode(code) {
  const userPatterns = getUserPatterns();
-  let activePattern = getSetting('activePattern');
+  let activePattern = getActivePattern();
  // check if code is that of an example tune
  const [example] = Object.entries(tunes).find(([_, tune]) => tune === code) || [];
  if (example && (!activePattern || activePattern === example)) {
@@ -162,7 +184,7 @@ export function updateUserCode(code) {
 }

 export function deleteActivePattern() {
-  let activePattern = getSetting('activePattern');
+  let activePattern = getActivePattern();
  if (!activePattern) {
    console.warn('cannot delete: no pattern selected');
    return;
@@ -180,7 +202,7 @@ export function deleteActivePattern() {
 }

 export function duplicateActivePattern() {
-  let activePattern = getSetting('activePattern');
+  let activePattern = getActivePattern();
  let latestCode = getSetting('latestCode');
  if (!activePattern) {
    console.warn('cannot duplicate: no pattern selected');
@@ -192,8 +214,31 @@ export function duplicateActivePattern() {
  setActivePattern(activePattern);
 }

-export function setActivePattern(key) {
-  settingsMap.setKey('activePattern', key);
+export async function importPatterns(fileList) {
+  const files = Array.from(fileList);
+  await Promise.all(
+    files.map(async (file, i) => {
+      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!`);
 }

-export function importUserPatternJSON(jsonString) {}
+export async function exportPatterns() {
+  const userPatterns = getUserPatterns() || {};
+  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);
+}