last minute edits

- rename files to make more sense
- add transpilation slide

.eslintignore

@@ -0,0 +1,20 @@
+krill-parser.js
+krill.pegjs
+.eslintrc.json
+server.js
+tidal-sniffer.js
+*.jsx
+tunejs.js
+out/**
+postcss.config.js
+postcss.config.cjs
+tailwind.config.js
+tailwind.config.cjs
+vite.config.js
+/**/dist/**/*
+!**/*.mjs
+**/*.tsx
+**/*.ts
+**/*.json
+**/dev-dist
+**/dist

.eslintrc.json

@@ -0,0 +1,17 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": ["eslint:recommended"],
+  "overrides": [],
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["import"],
+  "rules": {
+    "no-unused-vars": ["warn", { "destructuredArrayIgnorePattern": ".", "ignoreRestSiblings": false }],
+    "import/no-extraneous-dependencies": ["error", {"devDependencies": true}]
+  }
+}

.github/workflows/deploy.yml

@@ -0,0 +1,49 @@
+name: Build and Deploy
+
+on: [workflow_dispatch]
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+  deployments: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - uses: actions/checkout@v2
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 7
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: "pnpm"
+      - name: Install Dependencies
+        run: pnpm install
+
+      - name: Build
+        run: pnpm build
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v2
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          # Upload entire repository
+          path: "./website/dist"
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1

.github/workflows/test.yml

@@ -7,13 +7,18 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16, 17]
+        node-version: [18]
 
     steps:
-    - uses: actions/checkout@v2
-    - uses: actions/setup-node@v3
-      with:
-        node-version: ${{ matrix.node-version }}
-        cache: 'npm'
-    - run: npm install
-    - run: npm test
+      - uses: actions/checkout@v2
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 7
+      - uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'pnpm'
+      - run: pnpm install
+      - run: pnpm run format-check
+      - run: pnpm run lint
+      - run: pnpm test

.gitignore

@@ -35,4 +35,8 @@ tutorial.rendered.mdx
 doc.json
 talk/public/EmuSP12
 talk/public/samples
-server/samples/old
+server/samples/old
+repl/stats.html
+coverage
+public/icons/apple-splash-*
+dev-dist

.prettierignore

@@ -0,0 +1,12 @@
+*.md
+*.json
+*.yml
+*.
+**/out
+**/dist
+packages/mini/krill-parser.js
+packages/xen/tunejs.js
+paper
+pnpm-lock.yaml
+pnpm-workspace.yaml
+**/dev-dist

.prettierrc

@@ -1,16 +1,15 @@
 {
-    "printWidth": 120,
-    "useTabs": false,
-    "tabWidth": 2,
-    "semi": true,
-    "singleQuote": true,
-    "jsxSingleQuote": false,
-    "trailingComma": "all",
-    "bracketSpacing": true,
-    "jsxBracketSameLine": false,
-    "arrowParens": "always",
-    "proseWrap": "preserve",
-    "htmlWhitespaceSensitivity": "css",
-    "endOfLine": "lf"
-  }
-  
+  "printWidth": 120,
+  "useTabs": false,
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "jsxSingleQuote": false,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "bracketSameLine": false,
+  "arrowParens": "always",
+  "proseWrap": "preserve",
+  "htmlWhitespaceSensitivity": "css",
+  "endOfLine": "lf"
+}

.vscode/settings.json

@@ -2,5 +2,9 @@
     "cSpell.words": [
         "subspan",
         "vals"
-    ]
+    ],
+    "yaml.schemas": {
+      "https://json.schemastore.org/github-workflow.json": "file:///home/felix/projects/strudel/.github/workflows/deploy.yml"
+    },
+    "testing.automaticallyOpenPeekView": "never"
 }

CONTRIBUTING.md

@@ -12,8 +12,8 @@ To get in touch with the contributors, either
 
 ## Ask a Question
 
-If you have any questions about strudel, make sure you've read the 
-[tutorial](https://strudel.tidalcycles.org/tutorial/) to find out if it answers your question.
+If you have any questions about strudel, make sure you've glanced through the
+[docs](https://strudel.tidalcycles.org/learn/) to find out if it answers your question.
 If not, use one of the Communication Channels above!
 
 Don't be afraid to ask! Your question might be of great value for other people too.
@@ -29,13 +29,10 @@ If you made some music with strudel, you can give back some love and share what
 Your creation could also be part of the random selection in the REPL if you want.
 Use one of the Communication Channels listed above.
 
-## Improve the Tutorial
+## Improve the Docs
 
-If you find some weak spots in the [tutorial](https://strudel.tidalcycles.org/), 
-you are welcome to improve them by editing [this file](https://github.com/tidalcycles/strudel/blob/main/tutorial/tutorial.mdx).
-
-
-This will even work without setting up a development environment, only a github account is required.
+If you find some weak spots in the [docs](https://strudel.tidalcycles.org/learn/getting-started),
+you can edit each file directly on github via the "Edit this page" link located in the right sidebar.
 
 ## Propose a Feature
 
@@ -52,40 +49,43 @@ Please check that it has not been reported before.
 To fix a bug that has been reported,
 
 1. check that nobody else is already fixing it and respond to the issue to let people know you're on it
-3. fork the repository
-4. make sure you've setup the project (see below)
-5. hopefully fix the bug
-6. make sure the tests pass
-7. send a pull request
+2. fork the repository
+3. make sure you've setup the project (see below)
+4. hopefully fix the bug
+5. make sure the tests pass
+6. send a pull request
 
 ## Write Tests
 
 There are still many tests that have not been written yet! Reading and writing tests is a great opportunity to get familiar with the codebase.
-You can find the tests in each package in the `test` folder. To run all tests, run `npm test` from the root folder.
+You can find the tests in each package in the `test` folder. To run all tests, run `pnpm test` from the root folder.
 
 ## Project Setup
 
 To get the project up and running for development, make sure you have installed:
 
-- git
-- node, preferably v16
+- [git](https://git-scm.com/)
+- [node](https://nodejs.org/en/) >= 18
+- [pnpm](https://pnpm.io/) (`npm i pnpm -g`)
 
 then, do the following:
 
 ```sh
 git clone https://github.com/tidalcycles/strudel.git && cd strudel
-npm i # install at root to symlink packages
-npx lerna bootstrap # install all dependencies in packages
-cd repl && npm i # install repl dependencies
-npm run start # start repl
+pnpm i # install at root to symlink packages
+pnpm start # start repl
 ```
 
-Those commands might look slightly different for your OS. 
+Those commands might look slightly different for your OS.
 Please report any problems you've had with the setup instructions!
 
 ## Code Style
 
 To make sure the code changes only where it should, we are using prettier to unify the code style.
+
+- You can format all files at once by running `pnpm prettier` from the project root
+- Run `pnpm format-check` from the project root to check if all files are well formatted
+
 If you use VSCode, you can
 
 1. install [the prettier extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
@@ -93,19 +93,55 @@ If you use VSCode, you can
 3. Choose "Configure Default Formatter..."
 4. Select prettier
 
+## ESLint
+
+To prevent unwanted runtime errors, this project uses [eslint](https://eslint.org/).
+
+- You can check for lint errors by running `pnpm lint`
+
+There are also eslint extensions / plugins for most editors.
+
+## Running Tests
+
+- Run all tests with `pnpm test`
+- Run all tests with UI using `pnpm test-ui`
+
+## Running all CI Checks
+
+When opening a PR, the CI runner will automatically check the code style and eslint, as well as run all tests.
+You can run the same check with `pnpm check`
+
 ## Package Workflow
 
 The project is split into multiple [packages](https://github.com/tidalcycles/strudel/tree/main/packages) with independent versioning.
-When you run `npm i` on the root folder, [npm workspaces](https://docs.npmjs.com/cli/v7/using-npm/workspaces) will symlink all packages
-in the `node_modules` folder. This will allow any js file to import `@strudel.cycles/<package-name>` to get the local version, 
-which allows developing multiple packages at the same time
+When you run `pnpm i` on the root folder, [pnpm workspaces](https://pnpm.io/workspaces) will install all dependencies of all subpackages. This will allow any js file to import `@strudel.cycles/<package-name>` to get the local version,
+allowing to develop multiple packages at the same time.
 
 ## Package Publishing
 
 To publish all packages that have been changed since the last release, run:
 
 ```sh
-npx lerna publish
+npm login
+
+# this will increment all the versions in package.json files of non private packages to selected versions
+npx lerna version --no-private
+
+# publish all packages inside /packages using pnpm! don't use lerna to publish!!
+pnpm --filter "./packages/**" publish --dry-run
+
+# the last command was only a dry-run, make sure everything looks ok, if yes, run the same command without flag
+```
+
+To manually publish a single package, increase the version in the `package.json`, then run `pnpm publish`.
+Important: Always publish with `pnpm`, as `npm` does not support overriding main files in `publishConfig`, which is done in all the packages.
+
+### New Packages
+
+To add a new package, you have to publish it manually the first time, using:
+
+```sh
+cd packages/<package-name> && pnpm publish --access public
 ```
 
 ## Have Fun

README.md

@@ -5,16 +5,17 @@
 An experiment in making a [Tidal](https://github.com/tidalcycles/tidal/) using web technologies. This software is slowly stabilising, but please continue to tread carefully.
 
 - Try it here: <https://strudel.tidalcycles.org/>
-- Tutorial: <https://strudel.tidalcycles.org/tutorial/>
+- Docs: <https://strudel.tidalcycles.org/learn/>
 - Technical Blog Post: <https://loophole-letters.vercel.app/strudel>
+- 1 Year of Strudel Blog Post: <https://loophole-letters.vercel.app/strudel1year>
 
 ## Running Locally
 
 After cloning the project, you can run the REPL locally:
 
 ```bash
-npm run setup
-npm run repl
+pnpm run setup
+pnpm run repl
 ```
 
 ## Using Strudel In Your Project

iclc2023/slides/.gitignore

@@ -23,5 +23,4 @@ dist-ssr
 *.sln
 *.sw?
 
-oldtunes.mjs
-public/samples/EMU World/
+public/samples

iclc2023/slides/README.md

@@ -0,0 +1,22 @@
+# Usage
+
+```sh
+cd iclc2023/slides
+pnpm i
+pnpm dev
+```
+
+- ctrl+click or ctrl+(left|right) to switch slides
+
+## Samples
+
+To make sure all the samples are available, clone:
+
+```sh
+cd public/samples
+git clone https://github.com/ritchse/tidal-drum-machines.git
+git clone https://github.com/tidalcycles/Dirt-Samples.git
+git clone https://github.com/felixroos/webaudiofontdata.git
+```
+
+or use symlinks..

iclc2023/slides/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Slides</title>
+  </head>
+  <body style="background-color: black">
+    <div id="root">
+      <span style="color: white">loading... </span>
+    </div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

iclc2023/slides/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "slides",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@mdx-js/rollup": "^2.3.0",
+    "@nanostores/persistent": "^0.7.0",
+    "@nanostores/react": "^0.4.1",
+    "@strudel.cycles/core": "workspace:*",
+    "@strudel.cycles/react": "workspace:*",
+    "@strudel.cycles/soundfonts": "workspace:*",
+    "@strudel.cycles/tonal": "workspace:*",
+    "@strudel.cycles/csound": "workspace:*",
+    "@strudel.cycles/webaudio": "workspace:*",
+    "@uiw/codemirror-themes-all": "^4.19.8",
+    "escodegen": "^2.0.0",
+    "nanostores": "^0.7.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-syntax-highlighter": "^15.5.0",
+    "remark-gfm": "^3.0.1",
+    "vite-plugin-top-level-await": "^1.3.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.8",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@vitejs/plugin-react": "^3.1.0",
+    "autoprefixer": "^10.4.14",
+    "postcss": "^8.4.21",
+    "tailwindcss": "^3.2.7",
+    "vite": "^4.2.0"
+  }
+}

iclc2023/slides/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

iclc2023/slides/src/EventEditor.jsx

@@ -0,0 +1,46 @@
+import { useState, useCallback } from 'react';
+import { atomone } from '@uiw/codemirror-themes-all';
+import { CodeMirror, flash, useKeydown } from '@strudel.cycles/react';
+import { initAudioOnFirstClick, webaudioOutput } from '@strudel.cycles/webaudio';
+import { TimeSpan } from '@strudel.cycles/core';
+
+const initAudio = initAudioOnFirstClick();
+
+function EventEditor({ code: initialCode }) {
+  const [code, setCode] = useState(initialCode);
+  const [view, setView] = useState();
+  useKeydown(
+    useCallback(
+      async (e) => {
+        if (view?.hasFocus) {
+          if (e.ctrlKey || e.altKey) {
+            if (e.code === 'Enter') {
+              /* if (getAudioContext().state !== 'running') {
+              alert('please click play to initialize the audio. you can use shortcuts after that!');
+              return;
+            } */
+              e.preventDefault();
+              flash(view);
+              let json = JSON.parse(code);
+              if (!Array.isArray(json)) {
+                json = [json];
+              }
+              await initAudio;
+              json.forEach((value) => {
+                const hap = new Hap(new TimeSpan(0, 1), new TimeSpan(0, 1), value);
+                webaudioOutput(hap, 0.01, 1, 1);
+              });
+            } else if (e.key === '.') {
+              stop();
+              e.preventDefault();
+            }
+          }
+        }
+      },
+      [code, view],
+    ),
+  );
+  return <CodeMirror value={code} onChange={setCode} theme={atomone} onViewChanged={(v) => setView(v)} fontSize={32} />;
+}
+
+export default EventEditor;

iclc2023/slides/src/EventsDemo.jsx

@@ -0,0 +1,39 @@
+import EventEditor from './EventEditor.jsx';
+import Stepper from './Stepper.jsx';
+
+const snippets = [
+  [`{ "s": "cp", "crush": 4 }`, 'Samples'],
+  [`{ "s": "sawtooth", "note": "e3" }`, 'Oscillators'],
+  [
+    `[
+  { "s": "gm_epiano2", "note": "c4" },
+  { "s": "gm_epiano2", "note": "eb4" },
+  { "s": "gm_epiano2", "note": "g4" }
+]`,
+    'Soundfonts',
+  ],
+  [
+    `{ 
+  "s": "toys",
+  "cutoff": 2000,
+  "delay": 0.5,
+  "crush": 4
+}`,
+    'Effects',
+  ],
+];
+
+function EventsDemo() {
+  return (
+    <Stepper
+      steps={snippets.map(([code, label]) => (
+        <div className="py-4 space-y-4">
+          <h3>{label}</h3>
+          <EventEditor code={code} />
+        </div>
+      ))}
+    />
+  );
+}
+
+export default EventsDemo;

iclc2023/slides/src/Highlight.jsx

@@ -0,0 +1,21 @@
+//import {Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+//import { atomDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+//import SyntaxHighlighter from 'react-syntax-highlighter';
+import { atomOneDark } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
+import js from 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';
+import hs from 'react-syntax-highlighter/dist/esm/languages/hljs/haskell';
+SyntaxHighlighter.registerLanguage('javascript', js);
+SyntaxHighlighter.registerLanguage('haskell', hs);
+
+function Highlight({ code, language = 'javascript' }) {
+  return (
+    <div className="text-[32px] leading-10 rounded-xl overflow-hidden">
+      <SyntaxHighlighter language={language} style={atomOneDark} customStyle={{ padding: '8px 10px' }}>
+        {code}
+      </SyntaxHighlighter>
+    </div>
+  );
+}
+
+export default Highlight;

iclc2023/slides/src/MiniComparison.jsx

@@ -0,0 +1,38 @@
+import { SlideRepl } from './SlideRepl.jsx';
+import Stepper from './Stepper.jsx';
+
+const snippets = [
+  [`sound("bd [hh sd]")`, `sound(seq("bd", ["hh", "sd"]))`, 'Nested Sequences'], //
+  [`sound("<bd sd>")`, `sound(cat("bd", "sd"))`, 'Cyclewise Sequences'], //
+  [`sound("bd,hh")`, `sound(stack("bd", "hh"))`, 'Stack'], //
+  [`sound("bd@3 sd@1")`, `sound(timeCat([3, "bd"], [1, "sd"]))`, 'Weighted Sequence'], //
+  [`sound("{lt ht mt, bd sd}")`, `sound(polymeter(["lt","ht","mt"], ["bd", "sd"]))`, 'Polymeter'], //
+  [`sound("{bd hh sd ht}%2")`, `sound(polymeterSteps(2, ["bd", "hh", "sd", "ht"]))`, 'Steps per Cycle'],
+];
+
+function MiniComparison() {
+  return (
+    <>
+      <h1>User Code: Mini Notation -&gt; JavaScript</h1>
+      <Stepper
+        steps={snippets.map(([a, b, label]) => (
+          <div className="py-4">
+            <h3 className="pb-4">{label}</h3>
+            <div className="space-y-2">
+              <div className="flex space-x-2">
+                <img src="./img/tidalcycles.svg" className={`h-10 mt-2`} />
+                <SlideRepl tune={a} hideHeader />
+              </div>
+              <div className="flex space-x-2">
+                <img src="./img/js.jpg" className={`h-10 mt-2`} />
+                <SlideRepl tune={b} hideHeader />
+              </div>
+            </div>
+          </div>
+        ))}
+      />
+    </>
+  );
+}
+
+export default MiniComparison;

iclc2023/slides/src/QueryDemo.jsx

@@ -0,0 +1,50 @@
+import { SlideRepl } from './SlideRepl.jsx';
+import Highlight from './Highlight.jsx';
+import Stepper from './Stepper.jsx';
+
+const snippets = [
+  [
+    <>
+      {' '}
+      <SlideRepl tune={`s("bd [hh sd]").crush(4).log()`} hideHeader />
+    </>,
+    'Logging Events',
+  ],
+  [
+    <>
+      <Highlight
+        code={`let pattern = s("bd [hh sd]").crush(4);
+let events = pattern.queryArc(0, 1);
+console.log(events.map(e => e.show()))`}
+        language="javascript"
+      />
+      <Highlight
+        language="json"
+        code={`[
+  "0/1 -> 1/2 | s:bd crush:4", 
+  "1/2 -> 3/4 | s:hh crush:4", 
+  "3/4 -> 1/1 | s:sd crush:4"
+]`}
+      />
+    </>,
+    'Querying Events Manually',
+  ],
+];
+
+function QueryDemo() {
+  return (
+    <>
+      <img src="./img/queryflow.png" className="w-[800px]" />
+      <Stepper
+        steps={snippets.map(([snippet, label]) => (
+          <div className="py-4 space-y-4">
+            <h3>{label}</h3>
+            {snippet}
+          </div>
+        ))}
+      />
+    </>
+  );
+}
+
+export default QueryDemo;

iclc2023/slides/src/SlideRepl.jsx

@@ -0,0 +1,49 @@
+import { evalScope, controls } from '@strudel.cycles/core';
+import { initAudioOnFirstClick } from '@strudel.cycles/webaudio';
+import { MiniRepl as _MiniRepl } from '@strudel.cycles/react';
+import { prebake } from './prebake';
+import { atomone } from '@uiw/codemirror-themes-all';
+import blackscreen from '@strudel.cycles/react/src/themes/blackscreen';
+
+if (typeof window !== 'undefined') {
+  await evalScope(
+    controls,
+    import('@strudel.cycles/core'),
+    import('@strudel.cycles/tonal'),
+    import('@strudel.cycles/mini'),
+    import('@strudel.cycles/webaudio'),
+    import('@strudel.cycles/soundfonts'),
+    import('@strudel.cycles/csound'),
+  );
+}
+
+if (typeof window !== 'undefined') {
+  initAudioOnFirstClick();
+  prebake();
+}
+
+export function SlideRepl({
+  tune,
+  drawTime,
+  punchcard,
+  canvasHeight = 100,
+  hideHeader = false,
+  fontSize = 32,
+  disabled = false,
+}) {
+  return (
+    <div className="not-prose rounded-xl overflow-hidden">
+      <_MiniRepl
+        hideHeader={hideHeader}
+        tune={tune}
+        hideOutsideView={true}
+        drawTime={drawTime}
+        punchcard={punchcard}
+        canvasHeight={canvasHeight}
+        fontSize={fontSize}
+        theme={disabled ? blackscreen : atomone}
+        // theme={themes[theme]}
+      />
+    </div>
+  );
+}

iclc2023/slides/src/Slides.jsx

@@ -0,0 +1,125 @@
+import { persistentAtom } from '@nanostores/persistent';
+import { useStore } from '@nanostores/react'; // or '@nanostores/preact'
+import useEvent from './useEvent';
+
+function cx(...classes) {
+  return classes.filter(Boolean).join(' ');
+}
+// https://vitejs.dev/guide/features.html#glob-import
+const slideImports = import.meta.glob('./slides/*.mdx');
+//const slideImports = import.meta.glob('./slides/*.mdx', { eager: true });
+console.log('load slides...', slideImports);
+
+const loadedMDXFiles = await Promise.all(
+  Object.entries(slideImports).map(async ([path, load]) => {
+    //Object.entries(slideImports).map(async ([path, m]) => {
+    const segments = path.split('/');
+    const filename = segments[segments.length - 1].slice(0, -4); // expects .mdx at the end
+    return [filename, (await load()).default];
+    //return [filename, m.default];
+  }),
+);
+console.log('load done!');
+
+const order = [
+  'cover',
+  'whatIsStrudel',
+  'history',
+  'hs2js',
+
+  'usage',
+  'swatch',
+  'repl',
+  //'repl-features',
+  'viz',
+
+  'replflow',
+
+  // User Code
+  'transpilation',
+  'mininotation',
+  // 'mini-comparison', // remove?
+  // Patterns
+  'patterns-events', // remove?
+  // scheduler?
+  // Output
+  'events-audio', // remove?
+  'outputs',
+  // 'csound', // remove?
+  //
+  // pattern alignment?
+  'bad',
+  'good',
+  'future',
+  'end',
+];
+// examples swatch
+// draw examples!!
+
+const slideEntries = order.map((name) => loadedMDXFiles.find(([file]) => file === name));
+
+// current slide index is persisted, so it's safe to refresh the browser
+export const slideIndex = persistentAtom('slideIndex', '0');
+
+export const prev = () => slideIndex.set((parseInt(slideIndex.get()) - 1 + slideEntries.length) % slideEntries.length);
+export const next = () => slideIndex.set((parseInt(slideIndex.get()) + 1) % slideEntries.length);
+
+function Slides() {
+  const activeIndex = parseInt(useStore(slideIndex));
+
+  /*useEvent('click', (e) => {
+    if (!e.ctrlKey) {
+      return;
+    }
+    const leftHalf = e.clientX / document.body.clientWidth < 0.5;
+    if (leftHalf) {
+      prev();
+    } else {
+      next();
+    }
+  });*/
+  /*useEvent('keydown', (e) => {
+    if (e.key === 'Home') {
+      prev();
+    } else if (e.key === 'End') {
+      next();
+    }
+  });*/
+
+  return (
+    <div className="w-screen h-screen overflow-hidden relative">
+      {slideEntries.map(([path, Slide], i) => (
+        <div
+          key={i}
+          className={cx(
+            `bg-slate-900 w-full h-full flex justify-center absolute top-0 transition-all ease-in-out duration-500 overflow-auto`,
+            i < activeIndex && '-translate-x-full',
+            i > activeIndex && 'translate-x-full',
+          )}
+        >
+          <div className="prose prose-invert w-[1400px] p-12 max-w-full" style={{ fontSize: '2em' }}>
+            {Math.abs(i - activeIndex) <= 1 && <Slide />}
+          </div>
+        </div>
+      ))}
+      <div className="text-white text-2xl text-bold cursor-pointer select-none">
+        <div className="fixed left-0 p-4 h-full items-start flex hover:bg-[#00000050]" onClick={() => prev()}>
+          &lt;
+        </div>
+        <div className="fixed right-0 p-4 h-full items-start flex hover:bg-[#00000050]" onClick={() => next()}>
+          &gt;
+        </div>
+      </div>
+      <div className="absolute top-0 w-full">
+        <div className="h-[5px] bg-slate-500 w-full z-100">
+          <div
+            style={{ width: ((activeIndex / (slideEntries.length - 1)) * 100).toFixed(0) + '%' }}
+            className="h-full bg-yellow-500"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Slides;

iclc2023/slides/src/Stepper.jsx

@@ -0,0 +1,20 @@
+import { useState } from 'react';
+
+function Stepper({ steps }) {
+  const [step, setStep] = useState(1);
+  return (
+    <div className="not-prose">
+      {steps.slice(0, step).map((snippet, i) => {
+        const isActive = i === step - 1;
+        return (
+          <div key={i} className={`border-l-4 pl-8 border-gray-500 ${isActive ? 'border-yellow-500' : ''}`}>
+            {snippet}
+          </div>
+        );
+      })}
+      {step < steps.length && <button onClick={() => setStep((r) => r + 1)}>next</button>}
+    </div>
+  );
+}
+
+export default Stepper;

iclc2023/slides/src/SyntaxComparison.jsx

@@ -0,0 +1,73 @@
+import { SlideRepl } from './SlideRepl.jsx';
+import Highlight from './Highlight.jsx';
+import Stepper from './Stepper.jsx';
+
+const snippets = [
+  [`sound "bd ~ [sd cp]"`, [`sound("bd ~ [sd cp]")`], 'Mini Notation'], //
+  [`sound "bd ~ [sd cp]" # speed "1 2"`, [`sound("bd ~ [sd cp]").speed("1 2")`], 'Composing Patterns'],
+  [
+    `fast 2 $ sound "bd ~ [sd cp]"`,
+    [`fast(2, sound("bd ~ [sd cp]"))`, `sound("bd ~ [sd cp]").fast(2)`],
+    'Patterns Transformations',
+  ],
+  [
+    `speed "1 2 3" + "4 5" # s "bd"`,
+    ['speed("1 2 3".add("4 5")).s("bd")', '"1 2 3".add("4 5").speed().s("bd")'],
+    'Pattern Arithmetic',
+  ],
+  [
+    `jux rev 
+  $ every 3 (fast 2) 
+  $ sound "bd sd"`,
+    [
+      `sound("bd sd")
+  .every(3, fast("2"))
+  .jux(rev)`,
+    ],
+    'Higher order transformations (with partial application)',
+  ],
+  [
+    `jux rev 
+  $ every "<3 5>" (fast "1 2") 
+  $ sound "bd sd cp mt"`,
+    [
+      `sound("bd sd cp mt")
+  .every("<3 5>", fast("1 2"))
+  .jux(rev)`,
+    ],
+    'Patterns all the way down',
+  ],
+];
+
+function SyntaxComparison() {
+  return (
+    <>
+      <h1>Haskell -&gt; JavaScript</h1>
+      <Stepper
+        steps={snippets
+          .map(([hs, js, label]) => (
+            <div className="py-4 space-y-4">
+              <h3>{label}</h3>
+              <div className="space-y-2">
+                <div className="flex space-x-4">
+                  <img src="./img/haskell.png" className="h-10 mt-2" />
+                  <Highlight language="haskell" code={hs} />
+                </div>
+                <div>
+                  {js.map((c, j) => (
+                    <div className="flex space-x-4" key={j}>
+                      <img src="./img/js.jpg" className={`h-10 mt-2`} />
+                      <SlideRepl tune={c} hideHeader />
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          ))
+          .concat([<>Fluent Interface: Just chain all the things!</>])}
+      />
+    </>
+  );
+}
+
+export default SyntaxComparison;

iclc2023/slides/src/TranspilationDemo.jsx

@@ -0,0 +1,84 @@
+import { useState, useCallback } from 'react';
+import { atomone } from '@uiw/codemirror-themes-all';
+import { CodeMirror, flash, useKeydown } from '@strudel.cycles/react';
+import { transpiler } from '@strudel.cycles/transpiler';
+import Highlight from './Highlight';
+import Stepper from './Stepper';
+import escodegen from 'escodegen';
+
+function getTranspiled(code) {
+  return transpiler(code, {
+    addReturn: false,
+    codegenOptions: {
+      format: escodegen.FORMAT_MINIFY,
+    },
+  });
+}
+
+function TranspilationEditor({ code: initialCode }) {
+  const [code, setCode] = useState(initialCode);
+  const [transpiled, setTranspiled] = useState(getTranspiled(initialCode));
+  const [view, setView] = useState();
+  useKeydown(
+    useCallback(
+      async (e) => {
+        if (view?.hasFocus) {
+          if (e.ctrlKey || e.altKey) {
+            if (e.code === 'Enter') {
+              /* if (getAudioContext().state !== 'running') {
+              alert('please click play to initialize the audio. you can use shortcuts after that!');
+              return;
+            } */
+              e.preventDefault();
+              flash(view);
+              const t = getTranspiled(code);
+              setTranspiled(t);
+              console.log('transpiled', t);
+            } else if (e.key === '.') {
+              stop();
+              e.preventDefault();
+            }
+          }
+        }
+      },
+      [code, view],
+    ),
+  );
+  return (
+    <div className="space-y-2 py-2">
+      <CodeMirror
+        value={code}
+        onChange={(v) => {
+          setCode(v);
+        }}
+        theme={atomone}
+        onViewChanged={(v) => setView(v)}
+        fontSize={32}
+      />
+      <span>⬇️ transpiles to</span>
+      <Highlight language="javascript" code={transpiled} />
+    </div>
+  );
+}
+
+function TranspilationDemo() {
+  return (
+    <div className="not-prose space-y-8">
+      <Stepper
+        steps={[
+          <>
+            <img src="./img/transpileflow.png" className="h-[500px]" />
+            <ul className="list-decimal pl-8">
+              <li>Parse JS Code with acorn to get AST</li>
+              <li>Modify AST with estree-walker</li>
+              <li>Convert modified AST back to JS with escodegen</li>
+            </ul>
+          </>,
+          <TranspilationEditor code={`"bd [hh sd]"`} />,
+        ]}
+      />
+    </div>
+  );
+}
+
+export default TranspilationDemo;

iclc2023/slides/src/index.css

@@ -0,0 +1,21 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.cm-activeLine {
+  background-color: transparent !important;
+}
+
+.cm-theme {
+  background-color: var(--background);
+  border: 1px solid var(--lineHighlight);
+  padding: 2px;
+}
+
+.cm-gutters {
+  display: none !important;
+}
+
+img {
+  @apply rounded-xl overflow-hidden;
+}

iclc2023/slides/src/main.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import Slides from './Slides';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <Slides />
+  </React.StrictMode>,
+);

iclc2023/slides/src/prebake.mjs

@@ -0,0 +1,22 @@
+import { registerSynthSounds, samples } from '@strudel.cycles/webaudio';
+import { registerSoundfonts } from '@strudel.cycles/soundfonts';
+
+export async function prebake() {
+  // https://archive.org/details/SalamanderGrandPianoV3
+  // License: CC-by http://creativecommons.org/licenses/by/3.0/ Author: Alexander Holm
+  await Promise.all([
+    registerSynthSounds(),
+    registerSoundfonts(`./samples/webaudiofontdata/sound/`),
+    /* samples(`./piano.json`, `./piano/`, { prebake: true }),
+    samples(`./vcsl.json`, 'github:sgossner/VCSL/master/', { prebake: true }),
+    */
+    //samples(`./tidal-drum-machines.json`, 'github:ritchse/tidal-drum-machines/main/machines/', {
+    samples(`./tidal-drum-machines.json`, './samples/tidal-drum-machines/machines/', {
+      prebake: true,
+      tag: 'drum-machines',
+    }) /*
+    samples(`./EmuSP12.json`, `./EmuSP12/`, { prebake: true, tag: 'drum-machines' }), */,
+    // samples('github:tidalcycles/Dirt-Samples/master'),
+    samples('./Dirt-Samples.json', './samples/Dirt-Samples/'),
+  ]);
+}

iclc2023/slides/src/slides/bad.mdx

@@ -0,0 +1,6 @@
+# What's bad
+
+- Dynamic Typing in JS
+- Fractions and Hot Paths
+- Verbose function composition
+- Method-chaining tradeoffs

iclc2023/slides/src/slides/cover.mdx

@@ -0,0 +1,7 @@
+<div className="flex flex-col justify-between h-full overflow-hidden max-h-screen space-y-8">
+  <h2 className="m-0">Strudel: live coding patterns on the Web</h2>
+  <div className="justify-center flex overflow-hidden not-prose">
+    <img src="./img/strudel_icon.png" className="h-full" />
+  </div>
+  <span>Felix Roos, Alex McLean</span>
+</div>

iclc2023/slides/src/slides/csound.mdx

@@ -0,0 +1,65 @@
+import { SlideRepl } from '../SlideRepl.jsx';
+
+# CSound Example
+
+## Loading ORC instruments
+
+<SlideRepl
+  tune={`// livecode.orc by Steven Yi
+await loadOrc('github:kunstmusik/csound-live-code/master/livecode.orc')
+
+stack(
+note("<C^7 A7 Dm7 Fm7>/2".voicings('lefthand'))
+.cutoff(sine.range(500,2000).round().slow(16))
+.euclidLegato(3,8).csound('FM1'),
+
+note("<C2 A1 D2 F2>/2").ply(8).csound('Bass')
+.gain("1 4 1 4"),
+
+note("0 7 [4 3] 2".fast(2/3)
+.off(".25 .125", add("<2 4 -3 -1>"))
+.slow(2).scale('A4 minor'))
+.legato(.25).csound('SynHarp'),
+
+s("bd*2,[~ hh]*2,~ cp").bank('RolandTR909')
+)`}
+hideHeader
+/>
+
+## Synthesis
+
+<SlideRepl
+  tune={`await loadCsound\`
+instr CoolSynth
+    iduration = p3
+    ifreq = p4
+    igain = p5
+    ioct = octcps(ifreq)
+
+    kpwm = oscili(.05, 8)
+    asig = vco2(igain, ifreq, 4, .5 + kpwm)
+    asig += vco2(igain, ifreq * 2)
+
+    idepth = 2
+    acut = transegr:a(0, .005, 0, idepth, .06, -4.2, 0.001, .01, -4.2, 0) ; filter envelope
+    asig = zdf_2pole(asig, cpsoct(ioct + acut + 2), 0.5)
+
+    iattack = .01
+    isustain = .5
+    idecay = .1
+    irelease = .1
+    asig *= linsegr:a(0, iattack, 1, idecay, isustain, iduration, isustain, irelease, 0)
+
+    out(asig, asig)
+
+endin\`
+
+"<0 2 [4 6](3,4,2) 3\*2>"
+.off(1/4, add(2))
+.off(1/2, add(6))
+.scale('D minor')
+.note()
+//.pianoroll()
+.csound('CoolSynth')`}
+hideHeader
+/>

iclc2023/slides/src/slides/docs.mdx

@@ -0,0 +1 @@
+# Strudel Docs

iclc2023/slides/src/slides/end.mdx

@@ -0,0 +1,4 @@
+# Thanks
+
+- ICLC organizers
+- Tidal Community

iclc2023/slides/src/slides/events-audio.mdx

@@ -0,0 +1,7 @@
+import { SlideRepl } from '../SlideRepl.jsx';
+import Highlight from '../Highlight.jsx';
+import EventsDemo from '../EventsDemo.jsx';
+
+# Webaudio Output: Values -> Sound
+
+<EventsDemo />

iclc2023/slides/src/slides/example.mdx

@@ -0,0 +1,15 @@
+import { SlideRepl } from '../SlideRepl.jsx';
+
+# Pattern Example
+
+<SlideRepl
+  tune={`"<0 2 [4 6](3,4,1) 3>"
+.off(1/4, add(2))
+.off(1/2, add(6))
+.scale('D minor')
+.legato(.25)
+.note().s("sawtooth square")
+.delay(.8).delaytime(.125)`}
+  hideHeader
+  punchcard
+/>

iclc2023/slides/src/slides/future.mdx

@@ -0,0 +1,10 @@
+# Future Outlook
+
+- (slow) community growth
+- block based evaluation
+- live collaboration
+- more audio backends
+- interface experiments, e.g.:
+  - alternative syntax, visual notations
+  - time scrubbing
+  - ui controls

iclc2023/slides/src/slides/good.mdx

@@ -0,0 +1,9 @@
+# What's good
+
+- Zero-install, multi-platform
+- works (surprisingly) well on mobile devices
+- visual feedback good for teaching + learning
+- loads of potential contributors
+- instant pattern sharing
+- two-way flow of features between strudel and tidal
+- full mini-notation in hydra and gibber

iclc2023/slides/src/slides/history.mdx

@@ -0,0 +1,3 @@
+# The journey
+
+![ports](./img/ports.png)

iclc2023/slides/src/slides/hs2js.mdx

@@ -0,0 +1,3 @@
+import SyntaxComparison from '../SyntaxComparison.jsx';
+
+<SyntaxComparison />

iclc2023/slides/src/slides/mini-comparison.mdx

@@ -0,0 +1,5 @@
+import { SlideRepl } from '../SlideRepl.jsx';
+import Highlight from '../Highlight.jsx';
+import MiniComparison from '../MiniComparison.jsx';
+
+<MiniComparison />

iclc2023/slides/src/slides/mininotation.mdx

@@ -0,0 +1,29 @@
+import Highlight from '../Highlight';
+import Stepper from '../Stepper';
+
+# User Code: Mini Notation
+
+<img src="./img/pegflow.png" />
+
+<Stepper
+  steps={[
+    <ul className="list-decimal pl-8">
+      <li>Parse Mini Notation to get AST</li>
+      <li>walk AST and construct function calls</li>
+    </ul>,
+    <div className="space-y-2 py-2">
+      <Highlight code={`mini('bd [hh sd]')`} />
+      <span>⬇️ resulting calls</span>
+      <Highlight
+        code={`seq(
+  reify('bd').withLocation([1,1,1], [1,4,4]),
+  seq(
+    reify('hh').withLocation([1,5,5], [1,8,8]),
+    reify('sd').withLocation([1,8,8], [1,10,10]),
+  )
+)`}
+      />
+      <span>➡️ location can be used for highlighting</span>
+    </div>,
+  ]}
+/>

iclc2023/slides/src/slides/outputs.mdx

@@ -0,0 +1,7 @@
+# What can I pattern?
+
+- Default: Web Audio API
+- OSC via osc-js, e.g. SuperDirt
+- Csound via the Csound WebAssembly build
+- MIDI via WebMIDI
+- Serial via WebSerial, e.g. for robot dancing

iclc2023/slides/src/slides/patterns-events.mdx

@@ -0,0 +1,5 @@
+import QueryDemo from '../QueryDemo.jsx';
+
+# Querying: From Patterns to Events
+
+<QueryDemo />

iclc2023/slides/src/slides/repl-features.mdx

@@ -0,0 +1,12 @@
+# REPL: Features
+
+- Visual Feedback
+- Example shuffler (Hydra-style)
+- Tutorial + reference
+- Shareable links
+- Sound Browser
+- Offline Support (+ installable PWA)
+- Outputs: Web Audio, MIDI, OSC, CSound, Serial, ..
+- Themes
+
+![illegible](./img/illegible.png)

iclc2023/slides/src/slides/repl.mdx

@@ -0,0 +1,7 @@
+# REPL - live coding editor
+
+[strudel.tidalcycles.org](https://strudel.tidalcycles.org/)
+
+{/* <iframe className="w-full h-[600px]" src="https://strudel.tidalcycles.org/#c2FtcGxlcyh7CiAgYmQ6IFsnYmQvQlQwQUFEQS53YXYnLCdiZC9CVDBBQUQwLndhdicsJ2JkL0JUMEEwREEud2F2JywnYmQvQlQwQTBEMy53YXYnLCdiZC9CVDBBMEQwLndhdicsJ2JkL0JUMEEwQTcud2F2J10sCiAgc2Q6IFsnc2Qvcnl0bS0wMS1jbGFzc2ljLndhdicsJ3NkL3J5dG0tMDAtaGFyZC53YXYnXSwKICBoaDogWydoaDI3LzAwMF9oaDI3Y2xvc2VkaGgud2F2JywnaGgvMDAwX2hoM2Nsb3NlZGhoLndhdiddLAp9LCAnZ2l0aHViOnRpZGFsY3ljbGVzL0RpcnQtU2FtcGxlcy9tYXN0ZXIvJyk7CnN0YWNrKAogIHMoImJkLFt%2BIDxzZCEzIHNkKDMsNCwyKT5dLGhoKjQiKSAvLyBkcnVtcwogIC5zcGVlZChwZXJsaW4ucmFuZ2UoLjcsMSkpIC8vIHJhbmRvbSBzYW1wbGUgc3BlZWQgdmFyaWF0aW9uCiAgLy8uaHVzaCgpCiAgLCI8YTEgYjEqMiBhMSgzLDgpIGUyPiIgLy8gYmFzc2xpbmUKICAub2ZmKDEvOCx4PT54LmFkZCgxMikuZGVncmFkZUJ5KC41KSkgLy8gcmFuZG9tIG9jdGF2ZSBqdW1wcwogIC5hZGQocGVybGluLnJhbmdlKDAsLjUpKSAvLyByYW5kb20gcGl0Y2ggdmFyaWF0aW9uCiAgLnN1cGVyaW1wb3NlKGFkZCguMDUpKSAvLyBhZGQgc2Vjb25kLCBzbGlnaHRseSBkZXR1bmVkIHZvaWNlCiAgLm4oKSAvLyB3cmFwIGluICJuIgogIC5kZWNheSguMTUpLnN1c3RhaW4oMCkgLy8gbWFrZSBlYWNoIG5vdGUgb2YgZXF1YWwgbGVuZ3RoCiAgLnMoJ3Nhd3Rvb3RoJykgLy8gd2F2ZWZvcm0KICAuZ2FpbiguNCkgLy8gdHVybiBkb3duCiAgLmN1dG9mZihzaW5lLnNsb3coNykucmFuZ2UoMzAwLDUwMDApKSAvLyBhdXRvbWF0ZSBjdXRvZmYKICAvLy5odXNoKCkKICAsIjxBbTchMyA8RW03IEU3YjEzIEVtNyBFYm03YjU%2BPiIudm9pY2luZ3MoJ2xlZnRoYW5kJykgLy8gY2hvcmRzCiAgLnN1cGVyaW1wb3NlKHg9PnguYWRkKC4wNCkpIC8vIGFkZCBzZWNvbmQsIHNsaWdodGx5IGRldHVuZWQgdm9pY2UKICAuYWRkKHBlcmxpbi5yYW5nZSgwLC41KSkgLy8gcmFuZG9tIHBpdGNoIHZhcmlhdGlvbgogIC5uKCkgLy8gd3JhcCBpbiAibiIKICAucygnc2F3dG9vdGgnKSAvLyB3YXZlZm9ybQogIC5nYWluKC4xNikgLy8gdHVybiBkb3duCiAgLmN1dG9mZig1MDApIC8vIGZpeGVkIGN1dG9mZgogIC5hdHRhY2soMSkgLy8gc2xvd2x5IGZhZGUgaW4KICAvLy5odXNoKCkKICAsImE0IGM1IDxlNiBhNj4iLnN0cnVjdCgieCg1LDgpIikKICAuc3VwZXJpbXBvc2UoeD0%2BeC5hZGQoLjA0KSkgLy8gYWRkIHNlY29uZCwgc2xpZ2h0bHkgZGV0dW5lZCB2b2ljZQogIC5hZGQocGVybGluLnJhbmdlKDAsLjUpKSAvLyByYW5kb20gcGl0Y2ggdmFyaWF0aW9uCiAgLm4oKSAvLyB3cmFwIGluICJuIgogIC5kZWNheSguMSkuc3VzdGFpbigwKSAvLyBtYWtlIG5vdGVzIHNob3J0CiAgLnMoJ3RyaWFuZ2xlJykgLy8gd2F2ZWZvcm0KICAuZGVncmFkZUJ5KHBlcmxpbi5yYW5nZSgwLC41KSkgLy8gcmFuZG9tbHkgY29udHJvbGxlZCByYW5kb20gcmVtb3ZhbCA6KQogIC5lY2hvV2l0aCg0LC4xMjUsKHgsbik9PnguZ2FpbiguMTUqMS8obisxKSkpIC8vIGVjaG8gbm90ZXMKICAvLy5odXNoKCkKKQogIC5zbG93KDEuNCk%3D" /> */}
+
+![repl](./img/repl.png)

iclc2023/slides/src/slides/replflow.mdx

@@ -0,0 +1,5 @@
+# REPL: System Overview
+
+<center>
+  <img src="./img/strudelflow.png" className="w-[900px]" />
+</center>

iclc2023/slides/src/slides/strudel-docs.mdx

@@ -0,0 +1,3 @@
+# Strudel Docs
+
+![docs](./img/docs.png)

iclc2023/slides/src/slides/swatch.mdx

@@ -0,0 +1,5 @@
+# Pattern Swatches
+
+fork strudel - publish your own patterns with a fixed version
+
+![swatch](./img/swatch.png)

iclc2023/slides/src/slides/transpilation.mdx

@@ -0,0 +1,5 @@
+import TranspilationDemo from '../TranspilationDemo';
+
+# User Code: Transpilation
+
+<TranspilationDemo />

iclc2023/slides/src/slides/usage.mdx

@@ -0,0 +1,14 @@
+import Highlight from '../Highlight.jsx';
+
+# Ways to use Strudel
+
+- "Strudel REPL" at [strudel.tidalcycles.org](https://strudel.tidalcycles.org)
+- strudel on [flok.cc](https://flok.cc/) for collaboration
+- `@strudel.cycles/*` npm packages for your own projects
+- Embeddable [Web Component](https://github.com/tidalcycles/strudel/tree/main/packages/embed#strudelcyclesembed)
+- Browser Plugin for [Mastodon](https://github.com/mortuosplango/topfenstrudel) + Discourse Plugin:
+
+<div className="flex">
+  <img src="./img/topfenstrudel.png" />
+  <img src="./img/discourse.png" />
+</div>

iclc2023/slides/src/slides/viz.mdx

@@ -0,0 +1,20 @@
+import { SlideRepl } from '../SlideRepl.jsx';
+
+# REPL: Visual Feedback
+
+Highlighting + Piano Roll
+
+<SlideRepl
+  hideHeader
+  punchcard
+  canvasHeight={300}
+  fontSize={24}
+  tune={`// Steve Reich - Piano Phase (1967) 
+note("E4 F#4 B4 C#5 D5 F#4 E4 C#5 B4 F#4 D5 C#5")
+  .layer(
+    x=>x.color('#00ff0050').pan(0).fast(1), // left speaker
+    x=>x.color('#ff00ff50').pan(1).fast(1.01) // right speaker
+  )
+  .slow(2).room(.5)
+  `}
+/>

iclc2023/slides/src/slides/whatIsStrudel.mdx

@@ -0,0 +1,28 @@
+import { SlideRepl } from '../SlideRepl.jsx';
+
+# What is Strudel
+
+- TidalCycles faithfully ported to JavaScript
+- zero-install live coding environment for the browser
+- free & open source, modular, hackable, sharable, embeddable:
+
+<SlideRepl
+  hideHeader
+  fontSize={24}
+  tune={`// froos - freakuency - 2023/03/29
+stack(
+  stack(
+    s("bd, ~ <rim cp>,~ hh*2").off(1/8, x=>x.speed(2).gain(.5)).fast(2),
+    s("oh*6").end(.01).speed(.5).room(.5).fast("1 2")
+  ).bank('RolandTR909'),
+  //
+  note("[c a f e](<3 5>,8,<0 1>)".add("0,.1").sub(24)).s('sawtooth').lpf(500),
+  //
+  "[~ <Cm7 Fm7 Bb7 Db7>]*2".voicings('lefthand').note().legato(.2)
+  .echoWith(6, .1, (p,n)=>p.add(note(n*.6)))
+  .lpf(sine.range(300,1000).slow(8)).lpq(6)
+  .add(note(perlin.range(0,.8))).s('gm_epiano2')
+  .mask("<0 1>")
+).restart("<1@3 1*[4 [8 16]]>")
+.slow(2)`}
+/>

iclc2023/slides/src/useEvent.jsx

@@ -0,0 +1,12 @@
+import { useEffect } from 'react';
+
+function useEvent(name, onTrigger, useCapture = false) {
+  useEffect(() => {
+    document.addEventListener(name, onTrigger, useCapture);
+    return () => {
+      document.removeEventListener(name, onTrigger, useCapture);
+    };
+  }, [onTrigger]);
+}
+
+export default useEvent;

iclc2023/slides/tailwind.config.cjs

@@ -0,0 +1,26 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './index.html',
+    './src/**/*.{js,ts,jsx,tsx,mdx}',
+    '../../packages/react/src/**/*.{html,js,jsx,md,mdx,ts,tsx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        // codemirror-theme settings
+        background: 'var(--background)',
+        lineBackground: 'var(--lineBackground)',
+        foreground: 'var(--foreground)',
+        caret: 'var(--caret)',
+        selection: 'var(--selection)',
+        selectionMatch: 'var(--selectionMatch)',
+        gutterBackground: 'var(--gutterBackground)',
+        gutterForeground: 'var(--gutterForeground)',
+        gutterBorder: 'var(--gutterBorder)',
+        lineHighlight: 'var(--lineHighlight)',
+      },
+    },
+  },
+  plugins: [require('@tailwindcss/typography')],
+};

iclc2023/slides/vite.config.js

@@ -0,0 +1,28 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import mdx from '@mdx-js/rollup';
+import gfm from 'remark-gfm';
+import topLevelAwait from 'vite-plugin-top-level-await';
+
+const options = {
+  // See https://mdxjs.com/advanced/plugins
+  remarkPlugins: [gfm],
+  rehypePlugins: [],
+};
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    react(),
+    mdx(options),
+    topLevelAwait({
+      // The export name of top-level await promise for each chunk module
+      promiseExportName: '__tla',
+      // The function to generate import names of top-level await promise in each chunk module
+      promiseImportName: (i) => `__tla_${i}`,
+    }),
+  ],
+  build: {
+    target: 'esnext', //browsers can handle the latest ES features
+  },
+});

index.mjs

@@ -0,0 +1,17 @@
+// this barrel export is currently only used to find undocumented exports
+export * from './packages/core/index.mjs';
+export * from './packages/csound/index.mjs';
+export * from './packages/embed/index.mjs';
+export * from './packages/eval/index.mjs';
+export * from './packages/midi/index.mjs';
+export * from './packages/mini/index.mjs';
+export * from './packages/osc/index.mjs';
+export * from './packages/react/index.mjs';
+export * from './packages/serial/index.mjs';
+export * from './packages/soundfonts/index.mjs';
+export * from './packages/tonal/index.mjs';
+export * from './packages/tone/index.mjs';
+export * from './packages/transpiler/index.mjs';
+export * from './packages/webaudio/index.mjs';
+export * from './packages/webdirt/index.mjs';
+export * from './packages/xen/index.mjs';

jsdoc.config.json

@@ -1,7 +1,7 @@
 {
   "source": {
     "includePattern": ".+\\.(js(doc|x)?|mjs)$",
-    "excludePattern": "node_modules|shift-parser|shift-reducer|shift-traverser"
+    "excludePattern": "node_modules|shift-parser|shift-reducer|shift-traverser|dist"
   },
   "plugins": ["plugins/markdown"],
   "opts": {

lerna.json

@@ -2,5 +2,7 @@
   "packages": [
     "packages/*"
   ],
-  "version": "independent"
+  "version": "independent",
+  "npmClient": "pnpm",
+  "useWorkspaces": true
 }

my-patterns/README.md

@@ -0,0 +1,59 @@
+# my-patterns
+
+This directory can be used to save your own patterns, which then get
+made into a pattern swatch.
+
+Example: <https://felixroos.github.io/strudel/swatch/>
+
+## deploy
+
+### 1. fork the [strudel repo on github](https://github.com/tidalcycles/strudel.git)
+
+### 2. clone your fork to your machine `git clone https://github.com/<your-username>/strudel.git strudel && cd strudel`
+
+### 3. create a separate branch like `git branch patternuary && git checkout patternuary`
+
+### 4. save one or more .txt files in the my-patterns folder
+
+### 5. edit `website/public/CNAME` to contain `<your-username>.github.io/strudel`
+
+### 6. edit `website/astro.config.mjs` to use site: `https://<your-username>.github.io` and base `/strudel`, like this
+
+```js
+const site = 'https://<your-username>.github.io';
+const base = '/strudel';
+```
+
+### 7. commit & push the changes
+
+```sh
+git add . && git commit -m "site config" && git push --set-upstream origin
+```
+
+### 8. deploy to github pages
+
+- go to settings -> pages and select "Github Actions" as source
+- go to settings -> environments -> github-pages and press the edit button next to `main` and type in `patternuary` (under "Deployment branches")
+- go to Actions -> `Build and Deploy` and click `Run workflow` with branch `patternuary`
+
+### 9. view your patterns at `<your-username>.github.io/strudel/swatch/`
+
+Alternatively, github pages allows you to use a custom domain, like https://mycooldomain.org/swatch/. [See their documentation for details](https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site).
+
+### 10. optional: automatic deployment
+
+If you want to automatically deploy your site on push, go to `deploy.yml` and change `workflow_dispatch` to `push`.
+
+## running locally
+
+- install dependencies with `npm run setup`
+- run dev server with `npm run repl` and open `http://localhost:3000/strudel/swatch/`
+
+## tests fail?
+
+Your tests might fail if the code does not follow prettiers format.
+In that case, run `npm run codeformat`. To disable that, remove `npm run format-check` from `test.yml`
+
+## updating your fork
+
+To update your fork, you can pull the main branch and merge it into your `patternuary` branch.

package.json

@@ -1,25 +1,33 @@
 {
   "name": "@strudel.cycles/monorepo",
-  "version": "0.0.1",
+  "version": "0.5.0",
   "private": true,
   "description": "Port of tidalcycles to javascript",
   "scripts": {
-    "test": "vitest run --version",
-    "test-ui": "vitest --ui",
-    "bootstrap": "lerna bootstrap",
-    "setup": "npm i && npm run bootstrap && cd repl && npm i && cd ../tutorial && npm i",
-    "snapshot": "cd repl && npm run snapshot",
-    "repl": "cd repl && npm run dev",
+    "setup": "pnpm i",
+    "pretest": "npm run jsdoc-json",
+    "prebuild": "npm run jsdoc-json",
+    "prestart": "npm run jsdoc-json",
+    "test": "npm run pretest && vitest run --version",
+    "test-ui": "npm run pretest && vitest --ui",
+    "test-coverage": "npm run pretest && vitest --coverage",
+    "snapshot": "npm run pretest && vitest run -u --silent",
+    "repl": "npm run prestart && cd website && npm run dev",
+    "start": "npm run prestart && cd website && npm run dev",
+    "dev": "npm run prestart && cd website && npm run dev",
+    "build": "npm run prebuild && cd website && npm run build",
+    "preview": "cd website && npm run preview",
     "osc": "cd packages/osc && npm run server",
-    "build": "rm -rf out && cd repl && npm run build && cd ../tutorial && npm run build",
-    "preview": "npx serve ./out",
-    "deploy": "gh-pages -d out",
+    "deploy": "NODE_DEBUG=gh-pages gh-pages -d out",
     "jsdoc": "jsdoc packages/ -c jsdoc.config.json",
-    "jsdoc-json": "jsdoc packages/ --template ./node_modules/jsdoc-json --destination doc.json -c jsdoc.config.json"
+    "jsdoc-json": "jsdoc packages/ --template ./node_modules/jsdoc-json --destination doc.json -c jsdoc.config.json",
+    "lint": "eslint . --ext mjs,js --quiet",
+    "codeformat": "prettier --write .",
+    "format-check": "prettier --check .",
+    "report-undocumented": "npm run jsdoc-json && node undocumented.mjs > undocumented.json",
+    "check": "npm run format-check && npm run lint && npm run test",
+    "iclc": "cd paper && pandoc --template=pandoc/iclc.html --citeproc  --number-sections iclc2023.md -o iclc2023.html && pandoc --template=pandoc/iclc.latex --citeproc --number-sections iclc2023.md -o iclc2023.pdf"
   },
-  "workspaces": [
-    "packages/*"
-  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tidalcycles/strudel.git"
@@ -37,15 +45,30 @@
     "url": "https://github.com/tidalcycles/strudel/issues"
   },
   "homepage": "https://strudel.tidalcycles.org",
+  "dependencies": {
+    "@strudel.cycles/core": "workspace:*",
+    "@strudel.cycles/mini": "workspace:*",
+    "@strudel.cycles/tonal": "workspace:*",
+    "@strudel.cycles/transpiler": "workspace:*",
+    "@strudel.cycles/webaudio": "workspace:*",
+    "@strudel.cycles/xen": "workspace:*",
+    "acorn": "^8.8.1",
+    "dependency-tree": "^9.0.0",
+    "vitest": "^0.25.7"
+  },
   "devDependencies": {
-    "@vitest/ui": "^0.21.1",
+    "@vitest/ui": "^0.25.7",
+    "c8": "^7.12.0",
+    "canvas": "^2.11.0",
+    "eslint": "^8.28.0",
+    "eslint-plugin-import": "^2.27.5",
     "events": "^3.3.0",
     "gh-pages": "^4.0.0",
-    "happy-dom": "^6.0.4",
     "jsdoc": "^3.6.10",
     "jsdoc-json": "^2.0.2",
     "jsdoc-to-markdown": "^7.1.1",
-    "lerna": "^4.0.0",
-    "vitest": "^0.21.1"
+    "lerna": "^6.5.1",
+    "prettier": "^2.8.1",
+    "rollup-plugin-visualizer": "^5.8.1"
   }
 }

packages/README.md

@@ -0,0 +1,15 @@
+# Packages
+
+Each folder represents one of the @strudel.cycles/* packages [published to npm](https://www.npmjs.com/org/strudel.cycles).
+
+To understand how those pieces connect, refer to the [Technical Manual](https://github.com/tidalcycles/strudel/wiki/Technical-Manual) or the individual READMEs.
+
+This is a graphical view of all the packages: [full screen](https://raw.githubusercontent.com/tidalcycles/strudel/main/dependencies.svg)
+
+![dependencies](https://raw.githubusercontent.com/tidalcycles/strudel/main/dependencies.svg)
+
+Generated with
+
+```sh
+npx depcruise --include-only "^packages" -X "node_modules" --output-type dot packages | dot -T svg > dependencygraph.svg
+```

packages/core/.npmignore

@@ -0,0 +1 @@
+examples

packages/core/README.md

@@ -33,6 +33,7 @@ b: 3/2 - 7/4
 c: 7/4 - 2
 ```
 
-- [play with @strudel.cycles/core on codesandbox](https://codesandbox.io/s/strudel-core-test-qmz6qr?file=/src/index.js).
-- [open color pattern example](https://raw.githack.com/tidalcycles/strudel/package-examples/packages/core/examples/canvas.html)
-- [open minimal repl example](https://raw.githack.com/tidalcycles/strudel/package-examples/packages/core/examples/metro.html)
+- [play with @strudel.cycles/core on codesandbox](https://codesandbox.io/s/strudel-core-test-forked-9ywhv7?file=/src/index.js).
+- [open color pattern example](https://raw.githack.com/tidalcycles/strudel/main/packages/core/examples/canvas.html)
+- [open minimal repl example](https://raw.githack.com/tidalcycles/strudel/main/packages/core/examples/vanilla.html)
+- [open minimal vite example](./examples/vite-vanilla-repl/)

packages/core/animate.mjs

@@ -0,0 +1,67 @@
+import { controls, Pattern, getDrawContext, silence, register, pure } from './index.mjs';
+const { createParams } = controls;
+
+let clearColor = '#22222210';
+
+Pattern.prototype.animate = function ({ callback, sync = false, smear = 0.5 } = {}) {
+  window.frame && cancelAnimationFrame(window.frame);
+  const ctx = getDrawContext();
+  const { clientWidth: ww, clientHeight: wh } = ctx.canvas;
+  let smearPart = smear === 0 ? '99' : Number((1 - smear) * 100).toFixed(0);
+  smearPart = smearPart.length === 1 ? `0${smearPart}` : smearPart;
+  clearColor = `#200010${smearPart}`;
+  const render = (t) => {
+    let frame;
+    /*     if (sync) {
+      t = scheduler.now();
+      frame = this.queryArc(t, t);
+    } else { */
+    t = Math.round(t);
+    frame = this.slow(1000).queryArc(t, t);
+    // }
+    ctx.fillStyle = clearColor;
+    ctx.fillRect(0, 0, ww, wh);
+    frame.forEach((f) => {
+      let { x, y, w, h, s, r, angle = 0, fill = 'darkseagreen' } = f.value;
+      w *= ww;
+      h *= wh;
+      if (r !== undefined && angle !== undefined) {
+        const radians = angle * 2 * Math.PI;
+        const [cx, cy] = [(ww - w) / 2, (wh - h) / 2];
+        x = cx + Math.cos(radians) * r * cx;
+        y = cy + Math.sin(radians) * r * cy;
+      } else {
+        x *= ww - w;
+        y *= wh - h;
+      }
+      const val = { ...f.value, x, y, w, h };
+      ctx.fillStyle = fill;
+      if (s === 'rect') {
+        ctx.fillRect(x, y, w, h);
+      } else if (s === 'ellipse') {
+        ctx.beginPath();
+        ctx.ellipse(x + w / 2, y + h / 2, w / 2, h / 2, 0, 0, 2 * Math.PI);
+        ctx.fill();
+      }
+      callback && callback(ctx, val, f);
+    });
+    window.frame = requestAnimationFrame(render);
+  };
+  window.frame = requestAnimationFrame(render);
+  return silence;
+};
+
+export const { x, y, w, h, angle, r, fill, smear } = createParams('x', 'y', 'w', 'h', 'angle', 'r', 'fill', 'smear');
+
+export const rescale = register('rescale', function (f, pat) {
+  return pat.mul(x(f).w(f).y(f).h(f));
+});
+
+export const moveXY = register('moveXY', function (dx, dy, pat) {
+  return pat.add(x(dx).y(dy));
+});
+
+export const zoomIn = register('zoomIn', function (f, pat) {
+  const d = pure(1).sub(f).div(2);
+  return pat.rescale(f).move(d, d);
+});

packages/core/color.mjs

@@ -0,0 +1,175 @@
+export const colorMap = {
+  aliceblue: '#f0f8ff',
+  antiquewhite: '#faebd7',
+  aqua: '#00ffff',
+  aquamarine: '#7fffd4',
+  azure: '#f0ffff',
+  beige: '#f5f5dc',
+  bisque: '#ffe4c4',
+  black: '#000000',
+  blanchedalmond: '#ffebcd',
+  blue: '#0000ff',
+  blueviolet: '#8a2be2',
+  brown: '#a52a2a',
+  burlywood: '#deb887',
+  cadetblue: '#5f9ea0',
+  chartreuse: '#7fff00',
+  chocolate: '#d2691e',
+  coral: '#ff7f50',
+  cornflowerblue: '#6495ed',
+  cornsilk: '#fff8dc',
+  crimson: '#dc143c',
+  cyan: '#00ffff',
+  darkblue: '#00008b',
+  darkcyan: '#008b8b',
+  darkgoldenrod: '#b8860b',
+  darkgray: '#a9a9a9',
+  darkgreen: '#006400',
+  darkgrey: '#a9a9a9',
+  darkkhaki: '#bdb76b',
+  darkmagenta: '#8b008b',
+  darkolivegreen: '#556b2f',
+  darkorange: '#ff8c00',
+  darkorchid: '#9932cc',
+  darkred: '#8b0000',
+  darksalmon: '#e9967a',
+  darkseagreen: '#8fbc8f',
+  darkslateblue: '#483d8b',
+  darkslategray: '#2f4f4f',
+  darkslategrey: '#2f4f4f',
+  darkturquoise: '#00ced1',
+  darkviolet: '#9400d3',
+  deeppink: '#ff1493',
+  deepskyblue: '#00bfff',
+  dimgray: '#696969',
+  dimgrey: '#696969',
+  dodgerblue: '#1e90ff',
+  firebrick: '#b22222',
+  floralwhite: '#fffaf0',
+  forestgreen: '#228b22',
+  fuchsia: '#ff00ff',
+  gainsboro: '#dcdcdc',
+  ghostwhite: '#f8f8ff',
+  gold: '#ffd700',
+  goldenrod: '#daa520',
+  gray: '#808080',
+  green: '#008000',
+  greenyellow: '#adff2f',
+  grey: '#808080',
+  honeydew: '#f0fff0',
+  hotpink: '#ff69b4',
+  indianred: '#cd5c5c',
+  indigo: '#4b0082',
+  ivory: '#fffff0',
+  khaki: '#f0e68c',
+  lavender: '#e6e6fa',
+  lavenderblush: '#fff0f5',
+  lawngreen: '#7cfc00',
+  lemonchiffon: '#fffacd',
+  lightblue: '#add8e6',
+  lightcoral: '#f08080',
+  lightcyan: '#e0ffff',
+  lightgoldenrodyellow: '#fafad2',
+  lightgray: '#d3d3d3',
+  lightgreen: '#90ee90',
+  lightgrey: '#d3d3d3',
+  lightpink: '#ffb6c1',
+  lightsalmon: '#ffa07a',
+  lightseagreen: '#20b2aa',
+  lightskyblue: '#87cefa',
+  lightslategray: '#778899',
+  lightslategrey: '#778899',
+  lightsteelblue: '#b0c4de',
+  lightyellow: '#ffffe0',
+  lime: '#00ff00',
+  limegreen: '#32cd32',
+  linen: '#faf0e6',
+  magenta: '#ff00ff',
+  maroon: '#800000',
+  mediumaquamarine: '#66cdaa',
+  mediumblue: '#0000cd',
+  mediumorchid: '#ba55d3',
+  mediumpurple: '#9370db',
+  mediumseagreen: '#3cb371',
+  mediumslateblue: '#7b68ee',
+  mediumspringgreen: '#00fa9a',
+  mediumturquoise: '#48d1cc',
+  mediumvioletred: '#c71585',
+  midnightblue: '#191970',
+  mintcream: '#f5fffa',
+  mistyrose: '#ffe4e1',
+  moccasin: '#ffe4b5',
+  navajowhite: '#ffdead',
+  navy: '#000080',
+  oldlace: '#fdf5e6',
+  olive: '#808000',
+  olivedrab: '#6b8e23',
+  orange: '#ffa500',
+  orangered: '#ff4500',
+  orchid: '#da70d6',
+  palegoldenrod: '#eee8aa',
+  palegreen: '#98fb98',
+  paleturquoise: '#afeeee',
+  palevioletred: '#db7093',
+  papayawhip: '#ffefd5',
+  peachpuff: '#ffdab9',
+  peru: '#cd853f',
+  pink: '#ffc0cb',
+  plum: '#dda0dd',
+  powderblue: '#b0e0e6',
+  purple: '#800080',
+  red: '#ff0000',
+  rosybrown: '#bc8f8f',
+  royalblue: '#4169e1',
+  saddlebrown: '#8b4513',
+  salmon: '#fa8072',
+  sandybrown: '#f4a460',
+  seagreen: '#2e8b57',
+  seashell: '#fff5ee',
+  sienna: '#a0522d',
+  silver: '#c0c0c0',
+  skyblue: '#87ceeb',
+  slateblue: '#6a5acd',
+  slategray: '#708090',
+  slategrey: '#708090',
+  snow: '#fffafa',
+  springgreen: '#00ff7f',
+  steelblue: '#4682b4',
+  tan: '#d2b48c',
+  teal: '#008080',
+  thistle: '#d8bfd8',
+  tomato: '#ff6347',
+  turquoise: '#40e0d0',
+  violet: '#ee82ee',
+  wheat: '#f5deb3',
+  white: '#ffffff',
+  whitesmoke: '#f5f5f5',
+  yellow: '#ffff00',
+  yellowgreen: '#9acd32',
+};
+
+export function convertColorToNumber(color) {
+  // Convert color to lowercase for easier matching
+  color = color.toLowerCase();
+
+  // If the color is a hex code, convert it to a number
+  if (color[0] === '#') {
+    return convertHexToNumber(color);
+  }
+
+  // If the color is a named color, return the corresponding number
+  if (colorMap[color] !== undefined) {
+    return convertHexToNumber(colorMap[color]);
+  }
+
+  // If the color is not recognized, return null
+  return -1;
+}
+
+export function convertHexToNumber(hex) {
+  // Remove the leading '#' from the hex code
+  hex = hex.slice(1);
+
+  // Convert the hex code to a number
+  return parseInt(hex, 16);
+}

packages/core/cyclist.mjs

@@ -0,0 +1,93 @@
+/*
+cyclist.mjs - <short description TODO>
+Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/core/cyclist.mjs>
+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 createClock from './zyklus.mjs';
+import { logger } from './logger.mjs';
+
+export class Cyclist {
+  constructor({ interval, onTrigger, onToggle, onError, getTime, latency = 0.1 }) {
+    this.started = false;
+    this.cps = 1;
+    this.lastTick = 0; // absolute time when last tick (clock callback) happened
+    this.lastBegin = 0; // query begin of last tick
+    this.lastEnd = 0; // query end of last tick
+    this.getTime = getTime; // get absolute time
+    this.onToggle = onToggle;
+    this.latency = latency; // fixed trigger time offset
+    const round = (x) => Math.round(x * 1000) / 1000;
+    this.clock = createClock(
+      getTime,
+      // called slightly before each cycle
+      (phase, duration, tick) => {
+        if (tick === 0) {
+          this.origin = phase;
+        }
+        try {
+          const time = getTime();
+          const begin = this.lastEnd;
+          this.lastBegin = begin;
+          const end = round(begin + duration * this.cps);
+          this.lastEnd = end;
+          const haps = this.pattern.queryArc(begin, end);
+          const tickdeadline = phase - time; // time left till phase begins
+          this.lastTick = time + tickdeadline;
+
+          haps.forEach((hap) => {
+            if (hap.part.begin.equals(hap.whole.begin)) {
+              const deadline = (hap.whole.begin - begin) / this.cps + tickdeadline + latency;
+              const duration = hap.duration / this.cps;
+              onTrigger?.(hap, deadline, duration, this.cps);
+            }
+          });
+        } catch (e) {
+          logger(`[cyclist] error: ${e.message}`);
+          onError?.(e);
+        }
+      },
+      interval, // duration of each cycle
+    );
+  }
+  now() {
+    const secondsSinceLastTick = this.getTime() - this.lastTick - this.clock.duration;
+    return this.lastBegin + secondsSinceLastTick * this.cps; // + this.clock.minLatency;
+  }
+  setStarted(v) {
+    this.started = v;
+    this.onToggle?.(v);
+  }
+  start() {
+    if (!this.pattern) {
+      throw new Error('Scheduler: no pattern set! call .setPattern first.');
+    }
+    logger('[cyclist] start');
+    this.clock.start();
+    this.setStarted(true);
+  }
+  pause() {
+    logger('[cyclist] pause');
+    this.clock.pause();
+    this.setStarted(false);
+  }
+  stop() {
+    logger('[cyclist] stop');
+    this.clock.stop();
+    this.lastEnd = 0;
+    this.setStarted(false);
+  }
+  setPattern(pat, autostart = false) {
+    this.pattern = pat;
+    if (autostart && !this.started) {
+      this.start();
+    }
+  }
+  setCps(cps = 1) {
+    this.cps = cps;
+  }
+  log(begin, end, haps) {
+    const onsets = haps.filter((h) => h.hasOnset());
+    console.log(`${begin.toFixed(4)} - ${end.toFixed(4)} ${Array(onsets.length).fill('I').join('')}`);
+  }
+}

packages/core/draw.mjs

@@ -4,8 +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 { Tone } from './tone.mjs';
-import { Pattern } from '@strudel.cycles/core';
+import { Pattern, getTime, State, TimeSpan } from './index.mjs';
 
 export const getDrawContext = (id = 'test-canvas') => {
   let canvas = document.querySelector('#' + id);
@@ -28,7 +27,7 @@ Pattern.prototype.draw = function (callback, { from, to, onQuery }) {
   let cycle,
     events = [];
   const animate = (time) => {
-    const t = Tone.getTransport().seconds;
+    const t = getTime();
     if (from !== undefined && to !== undefined) {
       const currentCycle = Math.floor(t);
       if (cycle !== currentCycle) {
@@ -50,9 +49,9 @@ Pattern.prototype.draw = function (callback, { from, to, onQuery }) {
   return this;
 };
 
-export const cleanupDraw = () => {
+export const cleanupDraw = (clearScreen = true) => {
   const ctx = getDrawContext();
-  ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
+  clearScreen && ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
   if (window.strudelAnimation) {
     cancelAnimationFrame(window.strudelAnimation);
   }
@@ -60,3 +59,9 @@ export const cleanupDraw = () => {
     clearInterval(window.strudelScheduler);
   }
 };
+
+Pattern.prototype.onPaint = function (onPaint) {
+  // this is evil! TODO: add pattern.context
+  this.context = { onPaint };
+  return this;
+};

packages/core/drawLine.mjs

@@ -21,6 +21,7 @@ import Fraction, { gcd } from './fraction.mjs';
  * @example
  * const line = drawLine("0 [1 2 3]", 10); // |0--123|0--123
  * console.log(line);
+ * silence;
  */
 function drawLine(pat, chars = 60) {
   let cycle = 0;

packages/core/euclid.mjs

@@ -1,95 +1,171 @@
 /*
-euclid.mjs - <short description TODO>
-Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/core/euclid.mjs>
+euclid.mjs - Bjorklund/Euclidean/Diaspora rhythms
+Copyright (C) 2023 Rohan Drape and strudel contributors
+
+See <https://github.com/tidalcycles/strudel/blob/main/packages/core/euclid.mjs> for authors of this file.
+
+The Bjorklund algorithm implementation is ported from the Haskell Music Theory Haskell module by Rohan Drape -
+https://rohandrape.net/?t=hmt
+
 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, timeCat } from './pattern.mjs';
-import bjork from 'bjork';
-import { rotate } from './util.mjs';
+import { Pattern, timeCat, register, silence } from './pattern.mjs';
+import { rotate, flatten, splitAt, zipWith } from './util.mjs';
 import Fraction from './fraction.mjs';
 
-const euclid = (pulses, steps, rotation = 0) => {
-  const b = bjork(steps, pulses);
+const left = function (n, x) {
+  const [ons, offs] = n;
+  const [xs, ys] = x;
+  const [_xs, __xs] = splitAt(offs, xs);
+  return [
+    [offs, ons - offs],
+    [zipWith((a, b) => a.concat(b), _xs, ys), __xs],
+  ];
+};
+
+const right = function (n, x) {
+  const [ons, offs] = n;
+  const [xs, ys] = x;
+  const [_ys, __ys] = splitAt(ons, ys);
+  const result = [
+    [ons, offs - ons],
+    [zipWith((a, b) => a.concat(b), xs, _ys), __ys],
+  ];
+  return result;
+};
+
+const _bjork = function (n, x) {
+  const [ons, offs] = n;
+  return Math.min(ons, offs) <= 1 ? [n, x] : _bjork(...(ons > offs ? left(n, x) : right(n, x)));
+};
+
+export const bjork = function (ons, steps) {
+  const offs = steps - ons;
+  const x = Array(ons).fill([1]);
+  const y = Array(offs).fill([0]);
+  const result = _bjork([ons, offs], [x, y]);
+  return flatten(result[1][0]).concat(flatten(result[1][1]));
+};
+
+/**
+ * Changes the structure of the pattern to form an euclidean rhythm.
+ * Euclidian rhythms are rhythms obtained using the greatest common
+ * divisor of two numbers.  They were described in 2004 by Godfried
+ * Toussaint, a canadian computer scientist.  Euclidian rhythms are
+ * really useful for computer/algorithmic music because they can
+ * describe a large number of rhythms with a couple of numbers.
+ *
+ * @memberof Pattern
+ * @name euclid
+ * @param {number} pulses the number of onsets / beats
+ * @param {number} steps the number of steps to fill
+ * @returns Pattern
+ * @example
+ * // The Cuban tresillo pattern.
+ * note("c3").euclid(3,8)
+ */
+
+/**
+ * Like `euclid`, but has an additional parameter for 'rotating' the resulting sequence.
+ * @memberof Pattern
+ * @name euclidRot
+ * @param {number} pulses the number of onsets / beats
+ * @param {number} steps the number of steps to fill
+ * @param {number} rotation offset in steps
+ * @returns Pattern
+ * @example
+ * // A Samba rhythm necklace from Brazil
+ * note("c3").euclidRot(3,16,14)
+ */
+
+/**
+ * @example // A thirteenth century Persian rhythm called Khafif-e-ramal.
+ * note("c3").euclid(2,5)
+ * @example // The archetypal pattern of the Cumbia from Colombia, as well as a Calypso rhythm from Trinidad.
+ * note("c3").euclid(3,4)
+ * @example // Another thirteenth century Persian rhythm by the name of Khafif-e-ramal, as well as a Rumanian folk-dance rhythm.
+ * note("c3").euclidRot(3,5,2)
+ * @example // A Ruchenitza rhythm used in a Bulgarian folk-dance.
+ * note("c3").euclid(3,7)
+ * @example // The Cuban tresillo pattern.
+ * note("c3").euclid(3,8)
+ * @example // Another Ruchenitza Bulgarian folk-dance rhythm.
+ * note("c3").euclid(4,7)
+ * @example // The Aksak rhythm of Turkey.
+ * note("c3").euclid(4,9)
+ * @example // The metric pattern used by Frank Zappa in his piece titled Outside Now.
+ * note("c3").euclid(4,11)
+ * @example // Yields the York-Samai pattern, a popular Arab rhythm.
+ * note("c3").euclid(5,6)
+ * @example // The Nawakhat pattern, another popular Arab rhythm.
+ * note("c3").euclid(5,7)
+ * @example // The Cuban cinquillo pattern.
+ * note("c3").euclid(5,8)
+ * @example // A popular Arab rhythm called Agsag-Samai.
+ * note("c3").euclid(5,9)
+ * @example // The metric pattern used by Moussorgsky in Pictures at an Exhibition.
+ * note("c3").euclid(5,11)
+ * @example // The Venda clapping pattern of a South African children’s song.
+ * note("c3").euclid(5,12)
+ * @example // The Bossa-Nova rhythm necklace of Brazil.
+ * note("c3").euclid(5,16)
+ * @example // A typical rhythm played on the Bendir (frame drum).
+ * note("c3").euclid(7,8)
+ * @example // A common West African bell pattern.
+ * note("c3").euclid(7,12)
+ * @example // A Samba rhythm necklace from Brazil.
+ * note("c3").euclidRot(7,16,14)
+ * @example // A rhythm necklace used in the Central African Republic.
+ * note("c3").euclid(9,16)
+ * @example // A rhythm necklace of the Aka Pygmies of Central Africa.
+ * note("c3").euclidRot(11,24,14)
+ * @example // Another rhythm necklace of the Aka Pygmies of the upper Sangha.
+ * note("c3").euclidRot(13,24,5)
+ */
+
+const _euclidRot = function (pulses, steps, rotation) {
+  const b = bjork(pulses, steps);
   if (rotation) {
     return rotate(b, -rotation);
   }
   return b;
 };
 
-/**
- * Changes the structure of the pattern to form an euclidean rhythm.
- * Euclidian rhythms are rhythms obtained using the greatest common divisor of two numbers.
- * They were described in 2004 by Godfried Toussaint, a canadian computer scientist.
- * Euclidian rhythms are really useful for computer/algorithmic music because they can accurately
- * describe a large number of rhythms used in the most important music world traditions.
- *
- * @memberof Pattern
- * @param {number} pulses the number of onsets / beats
- * @param {number} steps the number of steps to fill
- * @param {number} rotation (optional) offset in steps
- * @returns Pattern
- * @example // The Cuban tresillo pattern.
- * "c3".euclid(3,8)
- * @example // A thirteenth century Persian rhythm called Khafif-e-ramal.
- * "c3".euclid(2,5)
- * @example // The archetypal pattern of the Cumbia from Colombia, as well as a Calypso rhythm from Trinidad.
- * "c3".euclid(3,4)
- * @example // Another thirteenth century Persian rhythm by the name of Khafif-e-ramal, as well as a Rumanian folk-dance rhythm.
- * "c3".euclid(3,5,2)
- * @example // A Ruchenitza rhythm used in a Bulgarian folk-dance.
- * "c3".euclid(3,7)
- * @example // The Cuban tresillo pattern.
- * "c3".euclid(3,8)
- * @example // Another Ruchenitza Bulgarian folk-dance rhythm.
- * "c3".euclid(4,7)
- * @example // The Aksak rhythm of Turkey.
- * "c3".euclid(4,9)
- * @example // The metric pattern used by Frank Zappa in his piece titled Outside Now.
- * "c3".euclid(4,11)
- * @example // Yields the York-Samai pattern, a popular Arab rhythm.
- * "c3".euclid(5,6)
- * @example // The Nawakhat pattern, another popular Arab rhythm.
- * "c3".euclid(5,7)
- * @example // The Cuban cinquillo pattern.
- * "c3".euclid(5,8)
- * @example // A popular Arab rhythm called Agsag-Samai.
- * "c3".euclid(5,9)
- * @example // The metric pattern used by Moussorgsky in Pictures at an Exhibition.
- * "c3".euclid(5,11)
- * @example // The Venda clapping pattern of a South African children’s song.
- * "c3".euclid(5,12)
- * @example // The Bossa-Nova rhythm necklace of Brazil.
- * "c3".euclid(5,16)
- * @example // A typical rhythm played on the Bendir (frame drum).
- * "c3".euclid(7,8)
- * @example // A common West African bell pattern.
- * "c3".euclid(7,12)
- * @example // A Samba rhythm necklace from Brazil.
- * "c3".euclid(7,16,14)
- * @example // A rhythm necklace used in the Central African Republic.
- * "c3".euclid(9,16)
- * @example // A rhythm necklace of the Aka Pygmies of Central Africa.
- * "c3".euclid(11,24,14)
- * @example // Another rhythm necklace of the Aka Pygmies of the upper Sangha.
- * "c3".euclid(13,24,5)
- */
-Pattern.prototype.euclid = function (pulses, steps, rotation = 0) {
-  return this.struct(euclid(pulses, steps, rotation));
-};
+export const euclid = register('euclid', function (pulses, steps, pat) {
+  return pat.struct(_euclidRot(pulses, steps, 0));
+});
+
+export const { euclidrot, euclidRot } = register(['euclidrot', 'euclidRot'], function (pulses, steps, rotation, pat) {
+  return pat.struct(_euclidRot(pulses, steps, rotation));
+});
 
 /**
- * Similar to {@link Pattern#euclid}, but each pulse is held until the next pulse, so there will be no gaps.
+ * Similar to `euclid`, but each pulse is held until the next pulse,
+ * so there will be no gaps.
+ * @name euclidLegato
+ * @memberof Pattern
+ * @example
+ * n("g2").decay(.1).sustain(.3).euclidLegato(3,8)
  */
-Pattern.prototype.euclidLegato = function (pulses, steps, rotation = 0) {
-  const bin_pat = euclid(pulses, steps, rotation);
-  const firstOne = bin_pat.indexOf(1);
-  const gapless = rotate(bin_pat, firstOne)
+
+const _euclidLegato = function (pulses, steps, rotation, pat) {
+  if (pulses < 1) {
+    return silence;
+  }
+  const bin_pat = _euclidRot(pulses, steps, rotation);
+  const gapless = bin_pat
     .join('')
     .split('1')
     .slice(1)
     .map((s) => [s.length + 1, true]);
-  return this.struct(timeCat(...gapless)).late(Fraction(firstOne).div(steps));
+  return pat.struct(timeCat(...gapless));
 };
 
-export default euclid;
+export const euclidLegato = register(['euclidLegato'], function (pulses, steps, pat) {
+  return _euclidLegato(pulses, steps, 0, pat);
+});
+
+export const euclidLegatoRot = register(['euclidLegatoRot'], function (pulses, steps, rotation, pat) {
+  return _euclidLegato(pulses, steps, rotation, pat);
+});

packages/core/evaluate.mjs

@@ -0,0 +1,52 @@
+/*
+evaluate.mjs - <short description TODO>
+Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/eval/evaluate.mjs>
+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 { isPattern } from './index.mjs';
+
+export const evalScope = async (...args) => {
+  const results = await Promise.allSettled(args);
+  const modules = results.filter((result) => result.status === 'fulfilled').map((r) => r.value);
+  results.forEach((result, i) => {
+    if (result.status === 'rejected') {
+      console.warn(`evalScope: module with index ${i} could not be loaded:`, result.reason);
+    }
+  });
+  // Object.assign(globalThis, ...modules);
+  // below is a fix for above commented out line
+  // same error as https://github.com/vitest-dev/vitest/issues/1807 when running this on astro server
+  modules.forEach((module) => {
+    Object.entries(module).forEach(([name, value]) => {
+      globalThis[name] = value;
+    });
+  });
+};
+
+function safeEval(str, options = {}) {
+  const { wrapExpression = true, wrapAsync = true } = options;
+  if (wrapExpression) {
+    str = `{${str}}`;
+  }
+  if (wrapAsync) {
+    str = `(async ()=>${str})()`;
+  }
+  const body = `"use strict";return (${str})`;
+  return Function(body)();
+}
+
+export const evaluate = async (code, transpiler) => {
+  if (transpiler) {
+    code = transpiler(code); // transform syntactically correct js code to semantically usable code
+  }
+  // if no transpiler is given, we expect a single instruction (!wrapExpression)
+  const options = { wrapExpression: !!transpiler };
+  let evaluated = await safeEval(code, options);
+  if (!isPattern(evaluated)) {
+    console.log('evaluated', evaluated);
+    const message = `got "${typeof evaluated}" instead of pattern`;
+    throw new Error(message + (typeof evaluated === 'function' ? ', did you forget to call a function?' : '.'));
+  }
+  return { mode: 'javascript', pattern: evaluated };
+};

packages/core/examples/basic.html

@@ -1,13 +1,13 @@
 <input
   type="text"
   id="text"
-  value="cat('a', 'b')"
+  value="seq('a', ['b', 'c'])"
   style="width: 100%; font-size: 2em; outline: none; margin-bottom: 10px"
   spellcheck="false"
 />
 <div id="output"></div>
 <script type="module">
-  const strudel = await import('https://cdn.skypack.dev/@strudel.cycles/core@0.0.2');
+  const strudel = await import('https://cdn.skypack.dev/@strudel.cycles/core@0.6.8');
   Object.assign(window, strudel); // assign all strudel functions to global scope to use with eval
   const input = document.getElementById('text');
   const getEvents = () => {

packages/core/examples/canvas.html

@@ -2,13 +2,13 @@
   <input
     type="text"
     id="text"
-    value="cat('orange', 'indigo')"
+    value="seq('tomato', 'indigo', ['white', 'steelblue']).fast(4)"
     style="width: 100%; font-size: 2em; background: black; color: white; outline: none; position: absolute; top: 0"
     spellcheck="false"
   />
   <canvas id="canvas"></canvas>
   <script type="module">
-    const strudel = await import('https://cdn.skypack.dev/@strudel.cycles/core@0.0.2');
+    const strudel = await import('https://cdn.skypack.dev/@strudel.cycles/core@0.6.8');
     // this adds all strudel functions to the global scope, to be used by eval
     Object.assign(window, strudel);
     // setup elements

packages/core/examples/vanilla.html

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Buildless Vanilla Strudel REPL</title>
+  </head>
+  <body style="margin: 0; background: #222">
+    <div style="display: grid; height: 100vh; grid-template-rows: 32px auto">
+      <button id="start" style="width: 100vw; height: 32px">evaluate</button>
+      <textarea
+        id="text"
+        style="font-size: 2em; border: 0; color: white; background: transparent; outline: none; padding: 20px"
+        spellcheck="false"
+      ></textarea>
+    </div>
+    <div id="output"></div>
+    <script type="module">
+      import { controls, repl, evalScope } from 'https://cdn.skypack.dev/@strudel.cycles/core@0.6.8';
+      import { mini } from 'https://cdn.skypack.dev/@strudel.cycles/mini@0.6.0';
+      import { transpiler } from 'https://cdn.skypack.dev/@strudel.cycles/transpiler@0.6.0';
+      import {
+        getAudioContext,
+        webaudioOutput,
+        initAudioOnFirstClick,
+      } from 'https://cdn.skypack.dev/@strudel.cycles/webaudio@0.6.0';
+
+      initAudioOnFirstClick();
+      const ctx = getAudioContext();
+      const input = document.getElementById('text');
+      input.innerHTML = getTune();
+
+      evalScope(
+        controls,
+        import('https://cdn.skypack.dev/@strudel.cycles/core@0.6.8'),
+        import('https://cdn.skypack.dev/@strudel.cycles/mini@0.6.0'),
+        import('https://cdn.skypack.dev/@strudel.cycles/tonal@0.6.0'),
+        import('https://cdn.skypack.dev/@strudel.cycles/webaudio@0.6.0'),
+      );
+
+      const { evaluate } = repl({
+        defaultOutput: webaudioOutput,
+        getTime: () => ctx.currentTime,
+        transpiler,
+      });
+      document.getElementById('start').addEventListener('click', () => evaluate(input.value));
+
+      function getTune() {
+        return `await samples('github:tidalcycles/Dirt-Samples/master')
+
+stack(
+  // amen
+  n("0 1 2 3 4 5 6 7")
+  .sometimes(x=>x.ply(2))
+  .rarely(x=>x.speed("2 | -2"))
+  .sometimesBy(.4, x=>x.delay(".5"))
+  .s("amencutup")
+  .slow(2)
+  .room(.5)
+  ,
+  // bass
+  sine.add(saw.slow(4)).range(0,7).segment(8)
+  .superimpose(x=>x.add(.1))
+  .scale('G0 minor').note()
+  .s("sawtooth").decay(.1).sustain(0)
+  .gain(.4).cutoff(perlin.range(300,3000).slow(8)).resonance(10)
+  .degradeBy("0 0.1 .5 .1")
+  .rarely(add(note("12")))
+  ,
+  // chord
+  note("Bb3,D4".superimpose(x=>x.add(.2)))
+  .s('sawtooth').cutoff(1000).struct("<~@3 [~ x]>")
+  .decay(.05).sustain(.0).delay(.8).delaytime(.125).room(.8)
+  ,
+  // alien
+  s("breath").room(1).shape(.6).chop(16).rev().mask("<x ~@7>")
+  ,
+  n("0 1").s("east").delay(.5).degradeBy(.8).speed(rand.range(.5,1.5))
+).reset("<x@7 x(5,8)>")`;
+      }
+    </script>
+  </body>
+</html>

packages/core/examples/vite-vanilla-repl/.gitignore

@@ -0,0 +1 @@
+!dist

packages/core/examples/vite-vanilla-repl/README.md

@@ -0,0 +1,10 @@
+# vite-vanilla-repl
+
+This folder demonstrates how to set up a strudel repl using vite and vanilla JS. Run it using:
+
+```sh
+npm i
+npm run dev
+```
+
+or view it [live on githack](https://rawcdn.githack.com/tidalcycles/strudel/5fb36acb046ead7cd6ad3cd10f532e7f585f536a/packages/core/examples/vite-vanilla-repl/dist/index.html)

packages/core/examples/vite-vanilla-repl/dist/assets/index.211bbc68.js

@@ -0,0 +1 @@
+import{b as s,h as i,m,a as n,c as p,p as t}from"./index.4cbc0a10.js";export{s as SyntaxError,i as h,m as mini,n as minify,p as parse,t as patternifyAST};

packages/core/examples/vite-vanilla-repl/dist/assets/index.ecddf978.js

@@ -0,0 +1 @@
+import{g as s,f as d,i as t,n as r,l as u,j as o,d as f,k as p,r as g,s as i,w as l,e as m}from"./index.4cbc0a10.js";export{s as getAudioContext,d as getCachedBuffer,t as getLoadedBuffer,r as getLoadedSamples,u as loadBuffer,o as loadGithubSamples,f as panic,p as resetLoadedSamples,g as reverseBuffer,i as samples,l as webaudioOutput,m as webaudioOutputTrigger};

packages/core/examples/vite-vanilla-repl/dist/index.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite Vanilla Strudel REPL</title>
+    <script type="module" crossorigin src="/tidalcycles/strudel/use-acorn/packages/core/examples/vite-vanilla-repl/dist/assets/index.4cbc0a10.js"></script>
+  </head>
+  <body style="margin: 0; background: #222">
+    <div style="display: grid; height: 100vh">
+      <textarea
+        id="text"
+        style="font-size: 2em; border: 0; color: white; background: transparent; outline: none; padding: 20px"
+        spellcheck="false"
+      ></textarea>
+    </div>
+    <button
+      id="start"
+      style="
+        position: absolute;
+        border-radius: 10px;
+        top: 20px;
+        right: 20px;
+        padding: 20px;
+        border: 2px solid white;
+        background: transparent;
+        color: white;
+        cursor: pointer;
+      "
+    >
+      evaluate
+    </button>
+    <div id="output"></div>
+    
+  </body>
+</html>

packages/core/examples/vite-vanilla-repl/index.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite Vanilla Strudel REPL</title>
+  </head>
+  <body style="margin: 0; background: #222">
+    <div style="display: grid; height: 100vh">
+      <textarea
+        id="text"
+        style="font-size: 2em; border: 0; color: white; background: transparent; outline: none; padding: 20px"
+        spellcheck="false"
+      ></textarea>
+    </div>
+    <button
+      id="start"
+      style="
+        position: absolute;
+        border-radius: 10px;
+        top: 20px;
+        right: 20px;
+        padding: 20px;
+        border: 2px solid white;
+        background: transparent;
+        color: white;
+        cursor: pointer;
+      "
+    >
+      evaluate
+    </button>
+    <div id="output"></div>
+    <script type="module" src="./main.js"></script>
+  </body>
+</html>