last minute edits

fix: colorable highlighting
slide tweaks
2026-09-19 04:06:16 -04:00 · 2023-04-19 08:20:21 +02:00 · 2023-04-19 01:06:32 +02:00 · 2023-04-18 08:49:28 +01:00 · 2023-04-17 00:31:38 +02:00 · 2023-04-16 23:55:12 +02:00
175 changed files with 8784 additions and 9552 deletions
@@ -39,7 +39,4 @@ server/samples/old
 repl/stats.html
 coverage
 public/icons/apple-splash-*
-dev-dist
-Dirt-Samples
-tidal-drum-machines
-webaudiofontdata
+dev-dist
@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+public/samples
@@ -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..
@@ -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>
@@ -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"
+  }
+}
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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>
+  );
+}
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;
+}
@@ -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>,
+);
@@ -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/'),
+  ]);
+}
@@ -0,0 +1,6 @@
+# What's bad
+
+- Dynamic Typing in JS
+- Fractions and Hot Paths
+- Verbose function composition
+- Method-chaining tradeoffs
@@ -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>
@@ -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
+/>
@@ -0,0 +1 @@
+# Strudel Docs
@@ -0,0 +1,4 @@
+# Thanks
+
+- ICLC organizers
+- Tidal Community
@@ -0,0 +1,7 @@
+import { SlideRepl } from '../SlideRepl.jsx';
+import Highlight from '../Highlight.jsx';
+import EventsDemo from '../EventsDemo.jsx';
+
+# Webaudio Output: Values -> Sound
+
+<EventsDemo />
@@ -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
+/>
@@ -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
@@ -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
@@ -0,0 +1,3 @@
+# The journey
+
+![ports](./img/ports.png)
@@ -0,0 +1,3 @@
+import SyntaxComparison from '../SyntaxComparison.jsx';
+
+<SyntaxComparison />
@@ -0,0 +1,5 @@
+import { SlideRepl } from '../SlideRepl.jsx';
+import Highlight from '../Highlight.jsx';
+import MiniComparison from '../MiniComparison.jsx';
+
+<MiniComparison />
@@ -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>,
+  ]}
+/>
@@ -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
@@ -0,0 +1,5 @@
+import QueryDemo from '../QueryDemo.jsx';
+
+# Querying: From Patterns to Events
+
+<QueryDemo />
@@ -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)
@@ -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)
@@ -0,0 +1,5 @@
+# REPL: System Overview
+
+<center>
+  <img src="./img/strudelflow.png" className="w-[900px]" />
+</center>
@@ -0,0 +1,3 @@
+# Strudel Docs
+
+![docs](./img/docs.png)
@@ -0,0 +1,5 @@
+# Pattern Swatches
+
+fork strudel - publish your own patterns with a fixed version
+
+![swatch](./img/swatch.png)
@@ -0,0 +1,5 @@
+import TranspilationDemo from '../TranspilationDemo';
+
+# User Code: Transpilation
+
+<TranspilationDemo />
@@ -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>
@@ -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)
+  `}
+/>
@@ -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)`}
+/>
@@ -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;
@@ -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')],
+};
@@ -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
+  },
+});
@@ -18,6 +18,7 @@
    "build": "npm run prebuild && cd website && npm run build",
    "preview": "cd website && npm run preview",
    "osc": "cd packages/osc && npm run server",
+    "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",
    "lint": "eslint . --ext mjs,js --quiet",
@@ -53,19 +54,21 @@
    "@strudel.cycles/xen": "workspace:*",
    "acorn": "^8.8.1",
    "dependency-tree": "^9.0.0",
-    "vitest": "^0.28.0"
+    "vitest": "^0.25.7"
  },
  "devDependencies": {
-    "@vitest/ui": "^0.28.0",
-    "canvas": "^2.11.2",
-    "eslint": "^8.39.0",
+    "@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",
-    "jsdoc": "^4.0.2",
+    "gh-pages": "^4.0.0",
+    "jsdoc": "^3.6.10",
    "jsdoc-json": "^2.0.2",
-    "jsdoc-to-markdown": "^8.0.0",
-    "lerna": "^6.6.1",
-    "prettier": "^2.8.8",
+    "jsdoc-to-markdown": "^7.1.1",
+    "lerna": "^6.5.1",
+    "prettier": "^2.8.1",
    "rollup-plugin-visualizer": "^5.8.1"
  }
 }
@@ -1,3 +0,0 @@
-# @strudel/codemirror
-
-This package contains helpers and extensions to use codemirror6. See [vite-vanilla-repl-cm6](../core/examples/vite-vanilla-repl-cm6/main.js) as an example of using it.
@@ -1,199 +0,0 @@
-import { EditorState } from '@codemirror/state';
-import { EditorView, keymap, Decoration, lineNumbers, highlightActiveLineGutter } from '@codemirror/view';
-import { defaultKeymap } from '@codemirror/commands';
-import { syntaxHighlighting, defaultHighlightStyle } from '@codemirror/language';
-import { javascript } from '@codemirror/lang-javascript';
-import { StateField, StateEffect } from '@codemirror/state';
-import { oneDark } from './themes/one-dark';
-import { repl, Drawer } from '@strudel.cycles/core';
-
-// https://codemirror.net/docs/guide/
-export function initEditor({ initialCode = '', onChange, onEvaluate, onStop, theme = oneDark, root }) {
-  let state = EditorState.create({
-    doc: initialCode,
-    extensions: [
-      theme,
-      javascript(),
-      lineNumbers(),
-      highlightField,
-      highlightActiveLineGutter(),
-      syntaxHighlighting(defaultHighlightStyle),
-      keymap.of(defaultKeymap),
-      flashField,
-      EditorView.updateListener.of((v) => onChange(v)),
-      keymap.of([
-        {
-          key: 'Ctrl-Enter',
-          run: () => onEvaluate(),
-        },
-        {
-          key: 'Ctrl-.',
-          run: () => onStop(),
-        },
-      ]),
-    ],
-  });
-
-  return new EditorView({
-    state,
-    parent: root,
-  });
-}
-
-//
-//  highlighting
-//
-
-export const setHighlights = StateEffect.define();
-export const highlightField = StateField.define({
-  create() {
-    return Decoration.none;
-  },
-  update(highlights, tr) {
-    try {
-      for (let e of tr.effects) {
-        if (e.is(setHighlights)) {
-          const { haps } = e.value;
-          const marks =
-            haps
-              .map((hap) =>
-                (hap.context.locations || []).map(({ start, end }) => {
-                  // const color = hap.context.color || e.value.color || '#FFCA28';
-                  let from = tr.newDoc.line(start.line).from + start.column;
-                  let to = tr.newDoc.line(end.line).from + end.column;
-                  const l = tr.newDoc.length;
-                  if (from > l || to > l) {
-                    return; // dont mark outside of range, as it will throw an error
-                  }
-                  const mark = Decoration.mark({
-                    attributes: { style: `outline: 2px solid #FFCA28;` },
-                  });
-                  return mark.range(from, to);
-                }),
-              )
-              .flat()
-              .filter(Boolean) || [];
-          highlights = Decoration.set(marks, true);
-        }
-      }
-      return highlights;
-    } catch (err) {
-      // console.warn('highlighting error', err);
-      return Decoration.set([]);
-    }
-  },
-  provide: (f) => EditorView.decorations.from(f),
-});
-
-// helper to simply trigger highlighting for given haps
-export function highlightHaps(view, haps) {
-  view.dispatch({ effects: setHighlights.of({ haps }) });
-}
-
-//
-// flash
-//
-
-export const setFlash = StateEffect.define();
-const flashField = StateField.define({
-  create() {
-    return Decoration.none;
-  },
-  update(flash, tr) {
-    try {
-      for (let e of tr.effects) {
-        if (e.is(setFlash)) {
-          if (e.value) {
-            const mark = Decoration.mark({ attributes: { style: `background-color: #FFCA2880` } });
-            flash = Decoration.set([mark.range(0, tr.newDoc.length)]);
-          } else {
-            flash = Decoration.set([]);
-          }
-        }
-      }
-      return flash;
-    } catch (err) {
-      console.warn('flash error', err);
-      return flash;
-    }
-  },
-  provide: (f) => EditorView.decorations.from(f),
-});
-
-export const flash = (view, ms = 200) => {
-  view.dispatch({ effects: setFlash.of(true) });
-  setTimeout(() => {
-    view.dispatch({ effects: setFlash.of(false) });
-  }, ms);
-};
-
-export class StrudelMirror {
-  constructor(options) {
-    const { root, initialCode = '', onDraw, drawTime = [-2, 2], prebake, ...replOptions } = options;
-    this.code = initialCode;
-
-    this.drawer = new Drawer((haps, time) => {
-      const currentFrame = haps.filter((hap) => time >= hap.whole.begin && time <= hap.whole.end);
-      this.highlight(currentFrame);
-      onDraw?.(haps, time, currentFrame);
-    }, drawTime);
-
-    const prebaked = prebake();
-    prebaked.then(async () => {
-      if (!onDraw) {
-        return;
-      }
-      const { scheduler, evaluate } = await this.repl;
-      // draw first frame instantly
-      prebaked.then(async () => {
-        await evaluate(this.code, false);
-        this.drawer.invalidate(scheduler);
-        onDraw?.(this.drawer.visibleHaps, 0, []);
-      });
-    });
-
-    this.repl = repl({
-      ...replOptions,
-      onToggle: async (started) => {
-        replOptions?.onToggle?.(started);
-        const { scheduler } = await this.repl;
-        if (started) {
-          this.drawer.start(scheduler);
-        } else {
-          this.drawer.stop();
-        }
-      },
-      beforeEval: async () => {
-        await prebaked;
-      },
-      afterEval: (options) => {
-        replOptions?.afterEval?.(options);
-        this.drawer.invalidate();
-      },
-    });
-    this.editor = initEditor({
-      root,
-      initialCode,
-      onChange: (v) => {
-        this.code = v.state.doc.toString();
-      },
-      onEvaluate: () => this.evaluate(),
-      onStop: () => this.stop(),
-    });
-  }
-  async evaluate() {
-    const { evaluate } = await this.repl;
-    this.flash();
-    await evaluate(this.code);
-  }
-  async stop() {
-    const { scheduler } = await this.repl;
-    scheduler.stop();
-  }
-  flash(ms) {
-    flash(this.editor, ms);
-  }
-  highlight(haps) {
-    highlightHaps(this.editor, haps);
-  }
-}
@@ -1,47 +0,0 @@
-{
-  "name": "@strudel/codemirror",
-  "version": "0.8.3",
-  "description": "Codemirror Extensions for Strudel",
-  "main": "codemirror.mjs",
-  "publishConfig": {
-    "main": "dist/index.js",
-    "module": "dist/index.mjs"
-  },
-  "scripts": {
-    "build": "vite build",
-    "prepublishOnly": "npm run build"
-  },
-  "type": "module",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/tidalcycles/strudel.git"
-  },
-  "keywords": [
-    "tidalcycles",
-    "strudel",
-    "pattern",
-    "livecoding",
-    "algorave"
-  ],
-  "author": "Felix Roos <flix91@gmail.com>",
-  "contributors": [
-    "Alex McLean <alex@slab.org>"
-  ],
-  "license": "AGPL-3.0-or-later",
-  "bugs": {
-    "url": "https://github.com/tidalcycles/strudel/issues"
-  },
-  "homepage": "https://github.com/tidalcycles/strudel#readme",
-  "dependencies": {
-    "@codemirror/commands": "^6.2.4",
-    "@codemirror/lang-javascript": "^6.1.7",
-    "@codemirror/language": "^6.6.0",
-    "@codemirror/state": "^6.2.0",
-    "@codemirror/view": "^6.10.0",
-    "@lezer/highlight": "^1.1.4",
-    "@strudel.cycles/core": "workspace:*"
-  },
-  "devDependencies": {
-    "vite": "^4.3.3"
-  }
-}
@@ -1,139 +0,0 @@
-import { EditorView } from '@codemirror/view';
-import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
-import { tags as t } from '@lezer/highlight';
-
-// Using https://github.com/one-dark/vscode-one-dark-theme/ as reference for the colors
-
-const chalky = '#e5c07b',
-  coral = '#e06c75',
-  cyan = '#56b6c2',
-  invalid = '#ffffff',
-  ivory = '#abb2bf',
-  stone = '#7d8799', // Brightened compared to original to increase contrast
-  malibu = '#61afef',
-  sage = '#98c379',
-  whiskey = '#d19a66',
-  violet = '#c678dd',
-  darkBackground = '#21252b',
-  highlightBackground = '#2c313a',
-  background = '#282c34',
-  tooltipBackground = '#353a42',
-  selection = '#3E4451',
-  cursor = '#528bff';
-
-/// The colors used in the theme, as CSS color strings.
-export const color = {
-  chalky,
-  coral,
-  cyan,
-  invalid,
-  ivory,
-  stone,
-  malibu,
-  sage,
-  whiskey,
-  violet,
-  darkBackground,
-  highlightBackground,
-  background,
-  tooltipBackground,
-  selection,
-  cursor,
-};
-
-/// The editor theme styles for One Dark.
-export const oneDarkTheme = EditorView.theme(
-  {
-    '&': {
-      color: ivory,
-      backgroundColor: background,
-    },
-
-    '.cm-content': {
-      caretColor: cursor,
-    },
-
-    '.cm-cursor, .cm-dropCursor': { borderLeftColor: cursor },
-    '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection':
-      { backgroundColor: selection },
-
-    '.cm-panels': { backgroundColor: darkBackground, color: ivory },
-    '.cm-panels.cm-panels-top': { borderBottom: '2px solid black' },
-    '.cm-panels.cm-panels-bottom': { borderTop: '2px solid black' },
-
-    '.cm-searchMatch': {
-      backgroundColor: '#72a1ff59',
-      outline: '1px solid #457dff',
-    },
-    '.cm-searchMatch.cm-searchMatch-selected': {
-      backgroundColor: '#6199ff2f',
-    },
-
-    '.cm-activeLine': { backgroundColor: '#6699ff0b' },
-    '.cm-selectionMatch': { backgroundColor: '#aafe661a' },
-
-    '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
-      backgroundColor: '#bad0f847',
-    },
-
-    '.cm-gutters': {
-      backgroundColor: background,
-      color: stone,
-      border: 'none',
-    },
-
-    '.cm-activeLineGutter': {
-      backgroundColor: highlightBackground,
-    },
-
-    '.cm-foldPlaceholder': {
-      backgroundColor: 'transparent',
-      border: 'none',
-      color: '#ddd',
-    },
-
-    '.cm-tooltip': {
-      border: 'none',
-      backgroundColor: tooltipBackground,
-    },
-    '.cm-tooltip .cm-tooltip-arrow:before': {
-      borderTopColor: 'transparent',
-      borderBottomColor: 'transparent',
-    },
-    '.cm-tooltip .cm-tooltip-arrow:after': {
-      borderTopColor: tooltipBackground,
-      borderBottomColor: tooltipBackground,
-    },
-    '.cm-tooltip-autocomplete': {
-      '& > ul > li[aria-selected]': {
-        backgroundColor: highlightBackground,
-        color: ivory,
-      },
-    },
-  },
-  { dark: true },
-);
-
-/// The highlighting style for code in the One Dark theme.
-export const oneDarkHighlightStyle = HighlightStyle.define([
-  { tag: t.keyword, color: violet },
-  { tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName], color: coral },
-  { tag: [t.function(t.variableName), t.labelName], color: malibu },
-  { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: whiskey },
-  { tag: [t.definition(t.name), t.separator], color: ivory },
-  { tag: [t.typeName, t.className, t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: chalky },
-  { tag: [t.operator, t.operatorKeyword, t.url, t.escape, t.regexp, t.link, t.special(t.string)], color: cyan },
-  { tag: [t.meta, t.comment], color: stone },
-  { tag: t.strong, fontWeight: 'bold' },
-  { tag: t.emphasis, fontStyle: 'italic' },
-  { tag: t.strikethrough, textDecoration: 'line-through' },
-  { tag: t.link, color: stone, textDecoration: 'underline' },
-  { tag: t.heading, fontWeight: 'bold', color: coral },
-  { tag: [t.atom, t.bool, t.special(t.variableName)], color: whiskey },
-  { tag: [t.processingInstruction, t.string, t.inserted], color: sage },
-  { tag: t.invalid, color: invalid },
-]);
-
-/// Extension to enable the One Dark theme (both the editor theme and
-/// the highlight style).
-export const oneDark = [oneDarkTheme, syntaxHighlighting(oneDarkHighlightStyle)];
@@ -1,19 +0,0 @@
-import { defineConfig } from 'vite';
-import { dependencies } from './package.json';
-import { resolve } from 'path';
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [],
-  build: {
-    lib: {
-      entry: resolve(__dirname, 'codemirror.mjs'),
-      formats: ['es', 'cjs'],
-      fileName: (ext) => ({ es: 'index.mjs', cjs: 'index.js' }[ext]),
-    },
-    rollupOptions: {
-      external: [...Object.keys(dependencies)],
-    },
-    target: 'esnext',
-  },
-});
@@ -1,5 +1,4 @@
-import { Pattern, getDrawContext, silence, register, pure } from './index.mjs';
-import controls from './controls.mjs'; // do not import from index.mjs as it breaks for some reason..
+import { controls, Pattern, getDrawContext, silence, register, pure } from './index.mjs';
 const { createParams } = controls;

 let clearColor = '#22222210';
@@ -4,7 +4,7 @@ Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/st
 This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */

-import { Pattern, register, sequence } from './pattern.mjs';
+import { Pattern, sequence } from './pattern.mjs';
 import { zipWith } from './util.mjs';

 const controls = {};
@@ -810,15 +810,4 @@ generic_params.forEach(([names, ...aliases]) => {
 controls.createParams = (...names) =>
  names.reduce((acc, name) => Object.assign(acc, { [name]: controls.createParam(name) }), {});

-controls.adsr = register('adsr', (adsr, pat) => {
-  adsr = !Array.isArray(adsr) ? [adsr] : adsr;
-  const [attack, decay, sustain, release] = adsr;
-  return pat.set({ attack, decay, sustain, release });
-});
-controls.ds = register('ds', (ds, pat) => {
-  ds = !Array.isArray(ds) ? [ds] : ds;
-  const [decay, sustain] = ds;
-  return pat.set({ decay, sustain });
-});
-
 export default controls;
@@ -1,6 +1,6 @@
 /*
 draw.mjs - <short description TODO>
-Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/core/draw.mjs>
+Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/tone/draw.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/>.
 */

@@ -13,7 +13,7 @@ export const getDrawContext = (id = 'test-canvas') => {
    canvas.id = id;
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
-    canvas.style = 'pointer-events:none;width:100%;height:100%;position:fixed;top:0;left:0';
+    canvas.style = 'pointer-events:none;width:100%;height:100%;position:fixed;top:0;left:0;z-index:5';
    document.body.prepend(canvas);
  }
  return canvas.getContext('2d');
@@ -65,97 +65,3 @@ Pattern.prototype.onPaint = function (onPaint) {
  this.context = { onPaint };
  return this;
 };
-
-// const round = (x) => Math.round(x * 1000) / 1000;
-
-// encapsulates starting and stopping animation frames
-export class Framer {
-  constructor(onFrame, onError) {
-    this.onFrame = onFrame;
-    this.onError = onError;
-  }
-  start() {
-    const self = this;
-    let frame = requestAnimationFrame(function updateHighlights(time) {
-      try {
-        self.onFrame(time);
-      } catch (err) {
-        self.onError(err);
-      }
-      frame = requestAnimationFrame(updateHighlights);
-    });
-    self.cancel = () => {
-      cancelAnimationFrame(frame);
-    };
-  }
-  stop() {
-    if (this.cancel) {
-      this.cancel();
-    }
-  }
-}
-
-// syncs animation frames to a cyclist scheduler
-// see vite-vanilla-repl-cm6 for an example
-export class Drawer {
-  constructor(onDraw, drawTime) {
-    let [lookbehind, lookahead] = drawTime; // e.g. [-2, 2]
-    lookbehind = Math.abs(lookbehind);
-    this.visibleHaps = [];
-    this.lastFrame = null;
-    this.drawTime = drawTime;
-    this.framer = new Framer(
-      () => {
-        if (!this.scheduler) {
-          console.warn('Drawer: no scheduler');
-          return;
-        }
-        // calculate current frame time (think right side of screen for pianoroll)
-        const phase = this.scheduler.now() + lookahead;
-        // first frame just captures the phase
-        if (this.lastFrame === null) {
-          this.lastFrame = phase;
-          return;
-        }
-        // query haps from last frame till now. take last 100ms max
-        const haps = this.scheduler.pattern.queryArc(Math.max(this.lastFrame, phase - 1 / 10), phase);
-        this.lastFrame = phase;
-        this.visibleHaps = (this.visibleHaps || [])
-          // filter out haps that are too far in the past (think left edge of screen for pianoroll)
-          .filter((h) => h.whole.end >= phase - lookbehind - lookahead)
-          // add new haps with onset (think right edge bars scrolling in)
-          .concat(haps.filter((h) => h.hasOnset()));
-        const time = phase - lookahead;
-        onDraw(this.visibleHaps, time, this);
-      },
-      (err) => {
-        console.warn('draw error', err);
-      },
-    );
-  }
-  invalidate(scheduler = this.scheduler) {
-    if (!scheduler) {
-      return;
-    }
-    this.scheduler = scheduler;
-    const t = scheduler.now();
-    let [_, lookahead] = this.drawTime;
-    const [begin, end] = [Math.max(t, 0), t + lookahead + 0.1];
-    // remove all future haps
-    this.visibleHaps = this.visibleHaps.filter((h) => h.whole.begin < t);
-    // query future haps
-    const futureHaps = scheduler.pattern.queryArc(begin, end); // +0.1 = workaround for weird holes in query..
-    // append future haps
-    this.visibleHaps = this.visibleHaps.concat(futureHaps);
-  }
-  start(scheduler) {
-    this.scheduler = scheduler;
-    this.invalidate();
-    this.framer.start();
-  }
-  stop() {
-    if (this.framer) {
-      this.framer.stop();
-    }
-  }
-}
@@ -1,24 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
@@ -1,8 +0,0 @@
-# vite-vanilla-repl-cm6
-
-This folder demonstrates how to set up a strudel repl using vite and vanilla JS + codemirror. Run it using:
-
-```sh
-npm i
-npm run dev
-```
@@ -1,22 +0,0 @@
-<!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>
-    <main>
-      <nav>
-        <button id="play">eval</button>
-        <button id="stop">stop</button>
-      </nav>
-      <div class="container">
-        <div id="editor"></div>
-        <div id="output"></div>
-      </div>
-      <canvas id="roll"></canvas>
-    </main>
-    <script type="module" src="./main.js"></script>
-  </body>
-</html>
@@ -1,39 +0,0 @@
-import { StrudelMirror } from '@strudel/codemirror';
-import { funk42 } from './tunes';
-import { drawPianoroll, evalScope, controls } from '@strudel.cycles/core';
-import './style.css';
-import { initAudioOnFirstClick } from '@strudel.cycles/webaudio';
-import { transpiler } from '@strudel.cycles/transpiler';
-import { getAudioContext, webaudioOutput, registerSynthSounds } from '@strudel.cycles/webaudio';
-import { registerSoundfonts } from '@strudel.cycles/soundfonts';
-
-// init canvas
-const canvas = document.getElementById('roll');
-canvas.width = canvas.width * 2;
-canvas.height = canvas.height * 2;
-const drawContext = canvas.getContext('2d');
-const drawTime = [-2, 2]; // time window of drawn haps
-
-const editor = new StrudelMirror({
-  defaultOutput: webaudioOutput,
-  getTime: () => getAudioContext().currentTime,
-  transpiler,
-  root: document.getElementById('editor'),
-  initialCode: funk42,
-  drawTime,
-  onDraw: (haps, time) => drawPianoroll({ haps, time, ctx: drawContext, drawTime, fold: 0 }),
-  prebake: async () => {
-    initAudioOnFirstClick(); // needed to make the browser happy (don't await this here..)
-    const loadModules = evalScope(
-      controls,
-      import('@strudel.cycles/core'),
-      import('@strudel.cycles/mini'),
-      import('@strudel.cycles/tonal'),
-      import('@strudel.cycles/webaudio'),
-    );
-    await Promise.all([loadModules, registerSynthSounds(), registerSoundfonts()]);
-  },
-});
-
-document.getElementById('play').addEventListener('click', () => editor.evaluate());
-document.getElementById('stop').addEventListener('click', () => editor.stop());
@@ -1,23 +0,0 @@
-{
-  "name": "vite-vanilla-repl-cm6",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview"
-  },
-  "devDependencies": {
-    "vite": "^4.3.2"
-  },
-  "dependencies": {
-    "@strudel/codemirror": "workspace:*",
-    "@strudel.cycles/core": "workspace:*",
-    "@strudel.cycles/mini": "workspace:*",
-    "@strudel.cycles/soundfonts": "workspace:*",
-    "@strudel.cycles/tonal": "workspace:*",
-    "@strudel.cycles/transpiler": "workspace:*",
-    "@strudel.cycles/webaudio": "workspace:*"
-  }
-}
@@ -1,31 +0,0 @@
-body,
-html {
-  margin: 0;
-  height: 100%;
-  background: #282c34;
-}
-
-main {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.container {
-  flex-grow: 1;
-  max-height: 100%;
-  position: relative;
-  overflow: auto;
-}
-
-#editor {
-  overflow: auto;
-}
-
-.cm-editor {
-  height: 100%;
-}
-
-#roll {
-  height: 300px;
-}
@@ -1,112 +0,0 @@
-export const bumpStreet = `// froos - "22 bump street", licensed with CC BY-NC-SA 4.0
-await samples('github:felixroos/samples/main')
-await samples('https://strudel.tidalcycles.org/tidal-drum-machines.json', 'github:ritchse/tidal-drum-machines/main/machines/')
-
-"<[0,<6 7 9>,13,<17 20 22 26>]!2>/2"
-  // make it 22 edo
-  .fmap(v => Math.pow(2,v/22))
-  // mess with the base frequency
-  .mul("<300 [300@3 200]>/8").freq()
-  .layer(
-    // chords
-    x=>x.div(freq(2)).s("flute").euclidLegato("<3 2>",8)
-      .shape(.4).lpf(sine.range(800,4000).slow(8)),
-    // adlibs
-    x=>x.arp("{0 3 2 [1 3]}%1.5")
-      .s('xylo').mul(freq(2))
-      .delay(.5).delayfeedback(.4).juxBy(.5, rev)
-      .hpf(sine.range(200,3000).slow(8)),
-    // bass
-    x=>x.arp("[0 [2 1?]](5,8)").s('sawtooth').div(freq(4))
-      .lpf(sine.range(400,2000).slow(8)).lpq(8).shape(.4)
-      .off(1/8, x=>x.mul(freq(2)).degradeBy(.5)).gain(.3)
-  ).clip(1).release(.2)
-.stack(
-  // drums
-  s("bd sd:<2 1>, [~ hh]*2, [~ rim]").bank('RolandTR909')
-  .off(1/8, x=>x.speed(2).gain(.4)).sometimes(ply(2)).gain(.8)
-  .mask("<0@4 1@12>/4")
-  .reset("<x@15 [x(3,8) x*[4 8]]>")
-  // wait for it...
-).fast(2/3)
-  //.crush(6) // remove "//" if you dare`;
-
-export const trafficFlam = `// froos - "traffic flam", licensed with CC BY-NC-SA 4.0
-
-await samples('github:felixroos/samples/main')
-await samples('https://strudel.tidalcycles.org/tidal-drum-machines.json', 'github:ritchse/tidal-drum-machines/main/machines/')
-
-addVoicings('hip', {
-  m11: ['2M 3m 4P 7m'],
-  '^7#11': ['3M 4A 5P 7M'],
-}, ['C4', 'C6'])
-
-stack(
-  stack(
-    "<Bbm11 A^7#11>/2".voicings('hip').note()
-    .s("gm_epiano1:2")
-    .arp("[<[0 1 2 3] [3 2 1 0]> ~@5]/2")
-    .release(2).late(.25).lpf(2000),
-    "<Bb1 A1>/2".note().s('gm_acoustic_bass'),
-    n("<0 2 3>(3,8)".off(1/8, add(4)))
-    .scale("<Bb4:minor A4:lydian>/2")
-    .s('gm_electric_guitar_jazz')
-    .decay(sine.range(.05, .2).slow(32)).sustain(0)
-    .delay(.5).lpf(sine.range(100,5000).slow(64))
-    .gain(.7).room(.5).pan(sine.range(0,1).slow(11))
-  ).add(perlin.range(0,.25).note()),
-  stack(
-    s("bd:1(3,8) rim").bank('RolandTR707').slow(2).room("<0 <.1 .6>>")
-    .when("<0@7 1>",x=>x.echoWith(3, .0625, (x,i) => x.speed(1+i*.24))),
-    s("rim*4").end(.05).bank('RolandTR808').speed(.8).room(.2)
-  )
-)
-  .late("[0 .05]*2").late(12)
-
-`;
-
-export const funk42 = `// froos - how to funk in 42 lines of code
-// adapted from "how to funk in two minutes" by marc rebillet https://www.youtube.com/watch?v=3vBwRfQbXkg
-// thanks to peach for the transcription: https://www.youtube.com/watch?v=8eiPXvIgda4
-
-await samples('github:felixroos/samples/main')
-await samples('https://strudel.tidalcycles.org/tidal-drum-machines.json', 'github:ritchse/tidal-drum-machines/main/machines/')
-
-setcps(.5)
-
-let drums = stack(
-  s("bd*2, ~ sd").bank('RolandTR707').room("0 .1"),
-  s("hh*4").begin(.2).release(.02).end(.25).release(.02)
-  .gain(.3).bank('RolandTR707').late(.02).room(.5),
-  //s("shaker_small").struct("[x x*2]*2").speed(".8,.9").release(.02)
-).fast(2)
-
-let wurli = note(\`<
-[[a2,g3,[b3 c4],e4] ~ [g3,c4,e4](3,8)@4 ~@2]!3 
-[[e2,e3,a3,b3,e4]@3 [e2,e3,ab3,b3,e4]@5]>\`)
-  .s("gm_epiano1:5").decay(.2).sustain("<[1 0@7]!3 1>")
-  .gain("<[.8@2 .4@14]!3 .7>").room(.3)
-
-let organ = note("<[~@3 [a3,d4,f#4]@2 [[a3,c4,e4]@2 ~] ~@2]!3 ~>".add(12))
-    .s("gm_percussive_organ:2").gain(.6).lpf(1800).pan(.2).room(.3);
-
-let clav = note(\`<
-[~@3 a2 [g3,[b3 c4],e4]@2 ~ a2 [g3,b3,e4] ~@2 [g3,c4,e4] ~@4]!3
-[~@3 e3 [[a3 b3],c3,e3]@2 ~ e2 [e3,a3]@3 [b3,e3] ~@2 [b3,e3]@2]>\`)
-  .s("gm_clavinet:1").decay("<.25!3 [.25 .4]>").sustain(0)
-  .gain(.7).pan(.8).room(.2);
-
-let bass = note(\`<
-[a1 [~ [g2 a2]] [g1 g#1] [a1 [g2 a2]]] 
-[a1 [~ [g2 a2]] [e3 d3] [c3 [g3 a3]]] 
-[a1 [~ [g2 a2]] [g1 g#1] [a1 [g2 a2]]] 
-[e2@6 e1@5 e1 [[d2 e3] g1]@4]
->\`).s("gm_electric_bass_pick:1").release(.1)
-
-stack(
-  drums
-  ,wurli
-  ,organ
-  ,clav
-  ,bass
-)`;
@@ -6,3 +6,5 @@ This folder demonstrates how to set up a strudel repl using vite and vanilla JS.
 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)
@@ -10,7 +10,7 @@
    "preview": "vite preview"
  },
  "devDependencies": {
-    "vite": "^4.3.3"
+    "vite": "^3.2.0"
  },
  "dependencies": {
    "@strudel.cycles/core": "workspace:*",
@@ -18,7 +18,6 @@ export * from './util.mjs';
 export * from './speak.mjs';
 export * from './evaluate.mjs';
 export * from './repl.mjs';
-export * from './cyclist.mjs';
 export * from './logger.mjs';
 export * from './time.mjs';
 export * from './draw.mjs';
@@ -1,6 +1,6 @@
 {
  "name": "@strudel.cycles/core",
-  "version": "0.8.1",
+  "version": "0.7.2",
  "description": "Port of Tidal Cycles to JavaScript",
  "main": "index.mjs",
  "type": "module",
@@ -35,7 +35,7 @@
  },
  "gitHead": "0e26d4e741500f5bae35b023608f062a794905c2",
  "devDependencies": {
-    "vite": "^4.3.3",
-    "vitest": "^0.28.0"
+    "vite": "^3.2.2",
+    "vitest": "^0.25.7"
  }
 }
@@ -50,7 +50,6 @@ Pattern.prototype.pianoroll = function ({
  timeframe: timeframeProp,
  fold = 0,
  vertical = 0,
-  labels = 0,
 } = {}) {
  const ctx = getDrawContext();
  const w = ctx.canvas.width;
@@ -88,7 +87,7 @@ Pattern.prototype.pianoroll = function ({
        const isActive = event.whole.begin <= t && event.whole.end > t;
        ctx.fillStyle = event.context?.color || inactive;
        ctx.strokeStyle = event.context?.color || active;
-        ctx.globalAlpha = event.context.velocity ?? event.value?.gain ?? 1;
+        ctx.globalAlpha = event.context.velocity ?? 1;
        const timePx = scale((event.whole.begin - (flipTime ? to : from)) / timeExtent, ...timeRange);
        let durationPx = scale(event.duration / timeExtent, 0, timeAxis);
        const value = getValue(event);
@@ -115,14 +114,6 @@ Pattern.prototype.pianoroll = function ({
          ];
        }
        isActive ? ctx.strokeRect(...coords) : ctx.fillRect(...coords);
-        if (labels) {
-          const label = event.value.note ?? event.value.s + (event.value.n ? `:${event.value.n}` : '');
-          ctx.font = `${barThickness * 0.75}px monospace`;
-          ctx.strokeStyle = 'black';
-          ctx.fillStyle = isActive ? 'white' : 'black';
-          ctx.textBaseline = 'top';
-          ctx.fillText(label, ...coords);
-        }
      });
      ctx.globalAlpha = 1; // reset!
      const playheadPosition = scale(-from / timeExtent, ...timeRange);
@@ -190,7 +181,6 @@ export function pianoroll({
  timeframe: timeframeProp,
  fold = 0,
  vertical = 0,
-  labels = false,
  ctx,
 } = {}) {
  const w = ctx.canvas.width;
@@ -250,7 +240,7 @@ export function pianoroll({
      const color = event.value?.color || event.context?.color;
      ctx.fillStyle = color || inactive;
      ctx.strokeStyle = color || active;
-      ctx.globalAlpha = event.context.velocity ?? event.value?.gain ?? 1;
+      ctx.globalAlpha = event.context.velocity ?? 1;
      const timePx = scale((event.whole.begin - (flipTime ? to : from)) / timeExtent, ...timeRange);
      let durationPx = scale(event.duration / timeExtent, 0, timeAxis);
      const value = getValue(event);
@@ -277,14 +267,6 @@ export function pianoroll({
        ];
      }
      isActive ? ctx.strokeRect(...coords) : ctx.fillRect(...coords);
-      if (labels) {
-        const label = event.value.note ?? event.value.s + (event.value.n ? `:${event.value.n}` : '');
-        ctx.font = `${barThickness * 0.75}px monospace`;
-        ctx.strokeStyle = 'black';
-        ctx.fillStyle = isActive ? 'white' : 'black';
-        ctx.textBaseline = 'top';
-        ctx.fillText(label, ...coords);
-      }
    });
  ctx.globalAlpha = 1; // reset!
  const playheadPosition = scale(-from / timeExtent, ...timeRange);
@@ -302,7 +284,7 @@ export function pianoroll({
  return this;
 }

-export function getDrawOptions(drawTime, options = {}) {
+function getOptions(drawTime, options = {}) {
  let [lookbehind, lookahead] = drawTime;
  lookbehind = Math.abs(lookbehind);
  const cycles = lookahead + lookbehind;
@@ -311,18 +293,5 @@ export function getDrawOptions(drawTime, options = {}) {
 }

 Pattern.prototype.punchcard = function (options) {
-  return this.onPaint((ctx, time, haps, drawTime) =>
-    pianoroll({ ctx, time, haps, ...getDrawOptions(drawTime, options) }),
-  );
+  return this.onPaint((ctx, time, haps, drawTime) => pianoroll({ ctx, time, haps, ...getOptions(drawTime, options) }));
 };
-
-/* Pattern.prototype.pianoroll = function (options) {
-  return this.onPaint((ctx, time, haps, drawTime) =>
-    pianoroll({ ctx, time, haps, ...getDrawOptions(drawTime, { fold: 0, ...options }) }),
-  );
-}; */
-
-export function drawPianoroll(options) {
-  const { drawTime, ...rest } = options;
-  pianoroll({ ...getDrawOptions(drawTime), ...rest });
-}
@@ -16,17 +16,26 @@ export function repl({
  onToggle,
  editPattern,
 }) {
+  const id = s4();
  const scheduler = new Cyclist({
    interval,
-    onTrigger: getTrigger({ defaultOutput, getTime }),
+    onTrigger: async (hap, deadline, duration, cps) => {
+      try {
+        if (!hap.context.onTrigger || !hap.context.dominantTrigger) {
+          await defaultOutput(hap, deadline, duration, cps);
+        }
+        if (hap.context.onTrigger) {
+          // call signature of output / onTrigger is different...
+          await hap.context.onTrigger(getTime() + deadline, hap, getTime(), cps);
+        }
+      } catch (err) {
+        logger(`[cyclist] error: ${err.message}`, 'error');
+      }
+    },
    onError: onSchedulerError,
    getTime,
    onToggle,
  });
-  const setPattern = (pattern, autostart = true) => {
-    pattern = editPattern?.(pattern) || pattern;
-    scheduler.setPattern(pattern, autostart);
-  };
  setTime(() => scheduler.now()); // TODO: refactor?
  const evaluate = async (code, autostart = true) => {
    if (!code) {
@@ -37,7 +46,8 @@ export function repl({
      let { pattern } = await _evaluate(code, transpiler);

      logger(`[eval] code updated`);
-      setPattern(pattern, autostart);
+      pattern = editPattern?.(pattern, id) || pattern;
+      scheduler.setPattern(pattern, autostart);
      afterEval?.({ code, pattern });
      return pattern;
    } catch (err) {
@@ -54,21 +64,11 @@ export function repl({
    setCps,
    setcps: setCps,
  });
-  return { scheduler, evaluate, start, stop, pause, setCps, setPattern };
+  return { scheduler, evaluate, start, stop, pause, setCps, id };
 }

-export const getTrigger =
-  ({ getTime, defaultOutput }) =>
-  async (hap, deadline, duration, cps) => {
-    try {
-      if (!hap.context.onTrigger || !hap.context.dominantTrigger) {
-        await defaultOutput(hap, deadline, duration, cps);
-      }
-      if (hap.context.onTrigger) {
-        // call signature of output / onTrigger is different...
-        await hap.context.onTrigger(getTime() + deadline, hap, getTime(), cps);
-      }
-    } catch (err) {
-      logger(`[cyclist] error: ${err.message}`, 'error');
-    }
-  };
+function s4() {
+  return Math.floor((1 + Math.random()) * 0x10000)
+    .toString(16)
+    .substring(1);
+}
@@ -67,14 +67,13 @@ export const getFreq = (noteOrMidi) => {
  return midiToFreq(noteToMidi(noteOrMidi));
 };

-const pcs = ['C', 'Db', 'D', 'Eb', 'E', 'F', 'Gb', 'G', 'Ab', 'A', 'Bb', 'B'];
 /**
 * @deprecated does not appear to be referenced or invoked anywhere in the codebase
 * @noAutocomplete
 */
 export const midi2note = (n) => {
  const oct = Math.floor(n / 12) - 1;
-  const pc = pcs[n % 12];
+  const pc = ['C', 'Db', 'D', 'Eb', 'E', 'F', 'Gb', 'G', 'Ab', 'A', 'Bb', 'B'][n % 12];
  return pc + oct;
 };

@@ -213,5 +212,3 @@ export const splitAt = function (index, value) {
 };

 export const zipWith = (f, xs, ys) => xs.map((n, i) => f(n, ys[i]));
-
-export const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
@@ -32,11 +32,11 @@
  },
  "homepage": "https://github.com/tidalcycles/strudel#readme",
  "dependencies": {
-    "@csound/browser": "6.18.7",
+    "@csound/browser": "6.18.5",
    "@strudel.cycles/core": "workspace:*",
    "@strudel.cycles/webaudio": "workspace:*"
  },
  "devDependencies": {
-    "vite": "^4.3.3"
+    "vite": "^3.2.2"
  }
 }
@@ -44,7 +44,7 @@
  },
  "devDependencies": {
    "@strudel.cycles/mini": "workspace:*",
-    "vite": "^4.3.3",
-    "vitest": "^0.28.0"
+    "vite": "^3.2.2",
+    "vitest": "^0.25.7"
  }
 }
@@ -31,9 +31,9 @@
  "dependencies": {
    "@strudel.cycles/core": "workspace:*",
    "@strudel.cycles/webaudio": "workspace:*",
-    "webmidi": "^3.1.5"
+    "webmidi": "^3.0.21"
  },
  "devDependencies": {
-    "vite": "^4.3.3"
+    "vite": "^3.2.2"
  }
 }
@@ -1,4 +1,4 @@
-// Generated by Peggy 3.0.2.
+// Generated by Peggy 2.0.1.
 //
 // https://peggyjs.org/

@@ -43,19 +43,16 @@ peg$SyntaxError.prototype.format = function(sources) {
      }
    }
    var s = this.location.start;
-    var offset_s = (this.location.source && (typeof this.location.source.offset === "function"))
-      ? this.location.source.offset(s)
-      : s;
-    var loc = this.location.source + ":" + offset_s.line + ":" + offset_s.column;
+    var loc = this.location.source + ":" + s.line + ":" + s.column;
    if (src) {
      var e = this.location.end;
-      var filler = peg$padEnd("", offset_s.line.toString().length, ' ');
+      var filler = peg$padEnd("", s.line.toString().length, ' ');
      var line = src[s.line - 1];
      var last = s.line === e.line ? e.column : line.length + 1;
      var hatLen = (last - s.column) || 1;
      str += "\n --> " + loc + "\n"
          + filler + " |\n"
-          + offset_s.line + " | " + line + "\n"
+          + s.line + " | " + line + "\n"
          + filler + " | " + peg$padEnd("", s.column - 1, ' ')
          + peg$padEnd("", hatLen, "^");
    } else {
@@ -425,11 +422,11 @@ function peg$parse(input, options) {
    }
  }

-  function peg$computeLocation(startPos, endPos, offset) {
+  function peg$computeLocation(startPos, endPos) {
    var startPosDetails = peg$computePosDetails(startPos);
    var endPosDetails = peg$computePosDetails(endPos);

-    var res = {
+    return {
      source: peg$source,
      start: {
        offset: startPos,
@@ -442,11 +439,6 @@ function peg$parse(input, options) {
        column: endPosDetails.column
      }
    };
-    if (offset && peg$source && (typeof peg$source.offset === "function")) {
-      res.start = peg$source.offset(res.start);
-      res.end = peg$source.offset(res.end);
-    }
-    return res;
  }

  function peg$fail(expected) {
@@ -190,8 +190,3 @@ export function minify(thing) {
  }
  return strudel.reify(thing);
 }
-
-// calling this function will cause patterns to parse strings as mini notation by default
-export function miniAllStrings() {
-  strudel.setStringParser(mini);
-}
@@ -1,6 +1,6 @@
 {
  "name": "@strudel.cycles/mini",
-  "version": "0.8.1",
+  "version": "0.7.2",
  "description": "Mini notation for strudel",
  "main": "index.mjs",
  "type": "module",
@@ -35,8 +35,8 @@
    "@strudel.cycles/core": "workspace:*"
  },
  "devDependencies": {
-    "peggy": "^3.0.2",
-    "vite": "^4.3.3",
-    "vitest": "^0.28.0"
+    "peggy": "^2.0.1",
+    "vite": "^3.2.2",
+    "vitest": "^0.25.7"
  }
 }
@@ -40,7 +40,7 @@
    "osc-js": "^2.4.0"
  },
  "devDependencies": {
-    "pkg": "^5.8.1",
-    "vite": "^4.3.3"
+    "pkg": "^5.7.0",
+    "vite": "^3.2.2"
  }
 }
@@ -15,18 +15,17 @@
    "@strudel.cycles/osc": "workspace:*",
    "@strudel.cycles/mini": "workspace:*",
    "@strudel.cycles/transpiler": "workspace:*",
-    "@strudel.cycles/soundfonts": "workspace:*",
    "@strudel.cycles/webaudio": "workspace:*",
    "@strudel.cycles/tonal": "workspace:*",
    "@strudel.cycles/react": "workspace:*"
  },
  "devDependencies": {
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.1",
-    "@vitejs/plugin-react": "^4.0.0",
-    "autoprefixer": "^10.4.14",
-    "postcss": "^8.4.23",
-    "tailwindcss": "^3.3.2",
-    "vite": "^4.3.3"
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
+    "@vitejs/plugin-react": "^2.0.1",
+    "autoprefixer": "^10.4.8",
+    "postcss": "^8.4.16",
+    "tailwindcss": "^3.1.8",
+    "vite": "^3.0.7"
  }
 }
@@ -1,34 +1,22 @@
 import { controls, evalScope } from '@strudel.cycles/core';
 import { CodeMirror, useHighlighting, useKeydown, useStrudel, flash } from '@strudel.cycles/react';
-import {
-  getAudioContext,
-  initAudioOnFirstClick,
-  panic,
-  webaudioOutput,
-  registerSynthSounds,
-} from '@strudel.cycles/webaudio';
-import { registerSoundfonts } from '@strudel.cycles/soundfonts';
+import { getAudioContext, initAudioOnFirstClick, panic, webaudioOutput } from '@strudel.cycles/webaudio';
 import { useCallback, useState } from 'react';
 import './style.css';
 // import { prebake } from '../../../../../repl/src/prebake.mjs';

 initAudioOnFirstClick();

-async function init() {
-  // TODO: only import stuff when play is pressed?
-  const loadModules = evalScope(
-    controls,
-    import('@strudel.cycles/core'),
-    import('@strudel.cycles/tonal'),
-    import('@strudel.cycles/mini'),
-    import('@strudel.cycles/xen'),
-    import('@strudel.cycles/webaudio'),
-    import('@strudel.cycles/osc'),
-  );
-
-  await Promise.all([loadModules, registerSynthSounds(), registerSoundfonts()]);
-}
-init();
+// TODO: only import stuff when play is pressed?
+evalScope(
+  controls,
+  import('@strudel.cycles/core'),
+  import('@strudel.cycles/tonal'),
+  import('@strudel.cycles/mini'),
+  import('@strudel.cycles/xen'),
+  import('@strudel.cycles/webaudio'),
+  import('@strudel.cycles/osc'),
+);

 const defaultTune = `samples({
  bd: ['bd/BT0AADA.wav','bd/BT0AAD0.wav','bd/BT0A0DA.wav','bd/BT0A0D3.wav','bd/BT0A0D0.wav','bd/BT0A0A7.wav'],
@@ -43,7 +31,7 @@ stack(
  .off(1/8,x=>x.add(12).degradeBy(.5)) // random octave jumps
  .add(perlin.range(0,.5)) // random pitch variation
  .superimpose(add(.05)) // add second, slightly detuned voice
-  .note() // wrap in "note"
+  .n() // wrap in "n"
  .decay(.15).sustain(0) // make each note of equal length
  .s('sawtooth') // waveform
  .gain(.4) // turn down
@@ -52,7 +40,7 @@ stack(
  ,"<Am7!3 <Em7 E7b13 Em7 Ebm7b5>>".voicings('lefthand') // chords
  .superimpose(x=>x.add(.04)) // add second, slightly detuned voice
  .add(perlin.range(0,.5)) // random pitch variation
-  .note() // wrap in "n"
+  .n() // wrap in "n"
  .s('square') // waveform
  .gain(.16) // turn down
  .cutoff(500) // fixed cutoff
@@ -61,7 +49,7 @@ stack(
  ,"a4 c5 <e6 a6>".struct("x(5,8)")
  .superimpose(x=>x.add(.04)) // add second, slightly detuned voice
  .add(perlin.range(0,.5)) // random pitch variation
-  .note() // wrap in "note"
+  .n() // wrap in "n"
  .decay(.1).sustain(0) // make notes short
  .s('triangle') // waveform
  .degradeBy(perlin.range(0,.5)) // randomly controlled random removal :)
@@ -115,7 +103,7 @@ function App() {
          }
        }
      },
-      [scheduler, evaluate, view, code],
+      [scheduler, evaluate, view],
    ),
  );
  return (
@@ -32,18 +32,18 @@
  },
  "homepage": "https://github.com/tidalcycles/strudel#readme",
  "dependencies": {
-    "@codemirror/autocomplete": "^6.6.0",
-    "@codemirror/lang-javascript": "^6.1.7",
+    "@codemirror/autocomplete": "^6.4.0",
+    "@codemirror/lang-javascript": "^6.1.1",
    "@codemirror/state": "^6.2.0",
-    "@codemirror/view": "^6.10.0",
-    "@lezer/highlight": "^1.1.4",
-    "@replit/codemirror-emacs": "^6.0.1",
-    "@replit/codemirror-vim": "^6.0.14",
+    "@codemirror/view": "^6.7.3",
+    "@lezer/highlight": "^1.1.3",
+    "@replit/codemirror-emacs": "^6.0.0",
+    "@replit/codemirror-vim": "^6.0.6",
    "@strudel.cycles/core": "workspace:*",
    "@strudel.cycles/transpiler": "workspace:*",
    "@strudel.cycles/webaudio": "workspace:*",
-    "@uiw/codemirror-themes": "^4.19.16",
-    "@uiw/react-codemirror": "^4.19.16",
+    "@uiw/codemirror-themes": "^4.12.4",
+    "@uiw/react-codemirror": "^4.12.4",
    "react-hook-inview": "^4.5.0"
  },
  "peerDependencies": {
@@ -51,14 +51,14 @@
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.1",
-    "@vitejs/plugin-react": "^4.0.0",
-    "autoprefixer": "^10.4.14",
-    "postcss": "^8.4.23",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@vitejs/plugin-react": "^2.2.0",
+    "autoprefixer": "^10.4.7",
+    "postcss": "^8.4.18",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
-    "tailwindcss": "^3.3.2",
-    "vite": "^4.3.3"
+    "tailwindcss": "^3.0.24",
+    "vite": "^3.2.2"
  }
 }
@@ -67,7 +67,7 @@ const highlightField = StateField.define({
                  }
                  let mark;
                  if (color) {
-                    mark = Decoration.mark({ attributes: { style: `outline: 2px solid ${color};` } });
+                    mark = Decoration.mark({ attributes: { style: `outline: 4px solid ${color};` } });
                  } else {
                    mark = Decoration.mark({ attributes: { class: `outline outline-2 outline-foreground` } });
                  }
@@ -104,7 +104,6 @@ export default function CodeMirror({
  onSelectionChange,
  theme,
  keybindings,
-  isLineNumbersDisplayed,
  fontSize = 18,
  fontFamily = 'monospace',
  options,
@@ -149,7 +148,6 @@ export default function CodeMirror({
        onCreateEditor={handleOnCreateEditor}
        onUpdate={handleOnUpdate}
        extensions={extensions}
-        basicSetup={{ lineNumbers: isLineNumbersDisplayed }}
      />
    </div>
  );
@@ -18,24 +18,18 @@ export function MiniRepl({
  tune,
  hideOutsideView = false,
  enableKeyboard,
-  onTrigger,
  drawTime,
  punchcard,
-  punchcardLabels,
-  onPaint,
  canvasHeight = 200,
  fontSize = 18,
-  fontFamily,
  hideHeader = false,
  theme,
-  keybindings,
-  isLineNumbersDisplayed,
 }) {
  drawTime = drawTime || (punchcard ? [0, 4] : undefined);
  const evalOnMount = !!drawTime;
  const drawContext = useCallback(
-    punchcard ? (canvasId) => document.querySelector('#' + canvasId)?.getContext('2d') : null,
-    [punchcard],
+    !!drawTime ? (canvasId) => document.querySelector('#' + canvasId)?.getContext('2d') : null,
+    [drawTime],
  );
  const {
    code,
@@ -56,16 +50,8 @@ export function MiniRepl({
    initialCode: tune,
    defaultOutput: webaudioOutput,
    editPattern: (pat, id) => {
-      //pat = pat.withContext((ctx) => ({ ...ctx, id }));
-      if (onTrigger) {
-        pat = pat.onTrigger(onTrigger, false);
-      }
-      if (onPaint) {
-        pat = pat.onPaint(onPaint);
-      } else if (punchcard) {
-        pat = pat.punchcard({ labels: punchcardLabels });
-      }
-      return pat;
+      pat = pat.withContext((ctx) => ({ ...ctx, id }));
+      return punchcard ? pat.punchcard() : pat;
    },
    getTime,
    evalOnMount,
@@ -101,7 +87,7 @@ export function MiniRepl({
              e.preventDefault();
              flash(view);
              await activateCode();
-            } else if (e.key === '.' || e.code === 'Period') {
+            } else if (e.key === '.') {
              stop();
              e.preventDefault();
            }
@@ -154,20 +140,11 @@ export function MiniRepl({
      )}
      <div className="overflow-auto relative">
        {show && (
-          <CodeMirror6
-            value={code}
-            onChange={setCode}
-            onViewChanged={setView}
-            theme={theme}
-            fontFamily={fontFamily}
-            fontSize={fontSize}
-            keybindings={keybindings}
-            isLineNumbersDisplayed={isLineNumbersDisplayed}
-          />
+          <CodeMirror6 value={code} onChange={setCode} onViewChanged={setView} theme={theme} fontSize={fontSize} />
        )}
        {error && <div className="text-right p-1 text-md text-red-200">{error.message}</div>}
      </div>
-      {punchcard && (
+      {drawTime && (
        <canvas
          id={canvasId}
          className="w-full pointer-events-none"
@@ -1,6 +1,6 @@
 :root {
  --background: #222;
-  --lineBackground: #22222299;
+  --lineBackground: #22222250;
  --foreground: #fff;
  --caret: #ffcc00;
  --selection: rgba(128, 203, 196, 0.5);
@@ -19,8 +19,6 @@ function useStrudel({
  drawContext,
  drawTime = [-2, 2],
 }) {
-  const id = useMemo(() => s4(), []);
-  canvasId = canvasId || `canvas-${id}`;
  // scheduler
  const [schedulerError, setSchedulerError] = useState();
  const [evalError, setEvalError] = useState();
@@ -29,11 +27,10 @@ function useStrudel({
  const [pattern, setPattern] = useState();
  const [started, setStarted] = useState(false);
  const isDirty = code !== activeCode;
-  //const shouldPaint = useCallback((pat) => !!(pat?.context?.onPaint && drawContext), [drawContext]);
-  const shouldPaint = useCallback((pat) => !!pat?.context?.onPaint, []);
+  const shouldPaint = useCallback((pat) => !!(pat?.context?.onPaint && drawContext), [drawContext]);

  // TODO: make sure this hook reruns when scheduler.started changes
-  const { scheduler, evaluate, start, stop, pause, setCps } = useMemo(
+  const { scheduler, evaluate, start, stop, pause, setCps, id } = useMemo(
    () =>
      repl({
        interval,
@@ -66,6 +63,8 @@ function useStrudel({
      }),
    [defaultOutput, interval, getTime],
  );
+
+  canvasId = canvasId || `canvas-${id}`;
  const broadcast = usePostMessage(({ data: { from, type } }) => {
    if (type === 'start' && from !== id) {
      // console.log('message', from, type);
@@ -159,9 +158,3 @@ function useStrudel({
 }

 export default useStrudel;
-
-function s4() {
-  return Math.floor((1 + Math.random()) * 0x10000)
-    .toString(16)
-    .substring(1);
-}
@@ -32,6 +32,6 @@
    "@strudel.cycles/core": "workspace:*"
  },
  "devDependencies": {
-    "vite": "^4.3.3"
+    "vite": "^3.2.2"
  }
 }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Felix Roos	1f54d93a00	last minute edits	2023-04-19 08:20:21 +02:00
Felix Roos	284f6293a2	fix: colorable highlighting	2023-04-19 01:06:32 +02:00
alex	a2b99f94bd	slide tweaks	2023-04-18 08:49:28 +01:00
Felix Roos	8a0f9c6e36	add swatch slide	2023-04-17 00:31:38 +02:00
Felix Roos	d38a8ab1fa	more slides	2023-04-16 23:55:12 +02:00
Felix Roos	6a451be50c	offline ready soundfonts	2023-04-16 23:54:06 +02:00
Felix Roos	dac2996b3d	Merge remote-tracking branch 'origin/main' into iclc-slides	2023-04-16 15:58:27 +02:00
Felix Roos	d689d71ee6	make slides samples work offline	2023-04-16 15:57:40 +02:00
Felix Roos	a4a6321afb	move stuff around, add flow charts	2023-04-15 21:01:42 +02:00
Felix Roos	8b13badb67	add more slides	2023-04-15 14:15:02 +02:00
Felix Roos	15a6747b2c	move stuff around + mini notation slide	2023-04-06 23:24:40 +02:00
Felix Roos	a96ff66f63	remove padding from stepper	2023-04-06 22:44:14 +02:00
Felix Roos	123323e32b	- add Stepper + use it everywhere - rename files to make more sense - add transpilation slide	2023-04-06 22:14:17 +02:00
Felix Roos	8ca850f9fe	improve query demo + headings	2023-04-06 13:00:44 +02:00
Felix Roos	d77725cf1d	add events to audio slide	2023-04-06 12:34:34 +02:00
Felix Roos	b016d115f5	- cover slide - rename stuff - make things more round	2023-04-06 11:55:53 +02:00
Felix Roos	1a57a86497	fix: mini repl logs	2023-04-06 11:55:03 +02:00
Felix Roos	d433e68fb2	moar slides	2023-04-06 01:54:18 +02:00
Felix Roos	c90bc80e6d	add example tune	2023-04-05 23:48:14 +02:00
Felix Roos	d3c4fd70dc	slides: add missing syntax comparison labels	2023-04-05 23:47:53 +02:00
Felix Roos	87cab96893	also load tidal drum machines in slides	2023-04-05 23:47:26 +02:00
Felix Roos	0248d15470	only mount nearby slides	2023-04-05 23:47:04 +02:00
Felix Roos	d4801c545e	add syntax comparison slide	2023-04-05 23:26:07 +02:00
Felix Roos	ce28acaf18	Merge branch 'main' into iclc-slides	2023-04-05 21:24:56 +02:00
Felix Roos	bf0336404d	add slides readme	2023-03-23 11:59:54 +01:00
Felix Roos	7c3d8e5c8d	fix: import	2023-03-23 11:57:43 +01:00
Felix Roos	3dad55e266	Merge branch 'main' into iclc-slides	2023-03-23 11:56:14 +01:00
Felix Roos	3d9ac37efe	add basic slides app	2023-03-19 22:08:43 +01:00
Felix Roos	d4619362bd	allow passing fontSize to MiniRepl	2023-03-19 22:04:17 +01:00