integrate repl into astro website

+ update build and setup tasks + workflow
+ move repl test folder to root
+ move docs and repl to website/src

.github/workflows/deploy.yml

@@ -24,10 +24,10 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           cache: "npm"
       - name: Install Dependencies
-        run: npm ci && cd repl && npm ci && cd ../tutorial && npm ci
+        run: npm ci && cd website
 
       - name: Build
         run: npm run build
@@ -39,7 +39,7 @@ jobs:
         uses: actions/upload-pages-artifact@v1
         with:
           # Upload entire repository
-          path: "./out"
+          path: "./website/dist"
 
       - name: Deploy to GitHub Pages
         id: deployment

package.json

@@ -9,9 +9,9 @@
     "test-ui": "vitest --ui",
     "test-coverage": "vitest --coverage",
     "bootstrap": "lerna bootstrap",
-    "setup": "npm i && npm run bootstrap && cd repl && npm i && cd ../tutorial && npm i",
+    "setup": "npm i && npm run bootstrap && cd website && npm i",
     "snapshot": "vitest run -u --silent",
-    "repl": "cd repl && npm run dev",
+    "repl": "cd website && npm run dev",
     "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",

test/dbdump.js

@@ -0,0 +1,10 @@
+import { createClient } from '@supabase/supabase-js';
+
+const supabase = createClient(
+  'https://pidxdsxphlhzjnzmifth.supabase.co',
+  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InBpZHhkc3hwaGxoempuem1pZnRoIiwicm9sZSI6ImFub24iLCJpYXQiOjE2NTYyMzA1NTYsImV4cCI6MTk3MTgwNjU1Nn0.bqlw7802fsWRnqU5BLYtmXk_k-D1VFmbkHMywWc15NM',
+);
+
+const { data } = await supabase.from('code');
+
+console.log(JSON.stringify(data));

test/runtime.mjs

@@ -0,0 +1,238 @@
+// this file contains a runtime scope for testing all the tunes
+// it mocks all the functions that won't work in node (who are not important for testing values / structure)
+// it might require mocking more stuff when tunes added that use other functions
+
+// import * as tunes from './tunes.mjs';
+// import { evaluate } from '@strudel.cycles/eval';
+import { evaluate } from '@strudel.cycles/transpiler';
+import { evalScope } from '@strudel.cycles/core';
+import * as strudel from '@strudel.cycles/core';
+import * as webaudio from '@strudel.cycles/webaudio';
+import controls from '@strudel.cycles/core/controls.mjs';
+// import gist from '@strudel.cycles/core/gist.js';
+import { mini } from '@strudel.cycles/mini/mini.mjs';
+// import { Tone } from '@strudel.cycles/tone';
+// import * as toneHelpers from '@strudel.cycles/tone/tone.mjs';
+// import * as voicingHelpers from '@strudel.cycles/tonal/voicings.mjs';
+// import * as uiHelpers from '@strudel.cycles/tone/ui.mjs';
+// import * as drawHelpers from '@strudel.cycles/tone/draw.mjs';
+// import euclid from '@strudel.cycles/core/euclid.mjs';
+// import '@strudel.cycles/tone/tone.mjs';
+// import '@strudel.cycles/midi/midi.mjs';
+import * as tonalHelpers from '@strudel.cycles/tonal';
+import '@strudel.cycles/xen/xen.mjs';
+// import '@strudel.cycles/xen/tune.mjs';
+// import '@strudel.cycles/core/euclid.mjs';
+// import '@strudel.cycles/core/speak.mjs'; // window is not defined
+// import '@strudel.cycles/tone/pianoroll.mjs';
+// import '@strudel.cycles/tone/draw.mjs';
+// import '@strudel.cycles/osc/osc.mjs';
+// import '@strudel.cycles/webaudio/webaudio.mjs';
+// import '@strudel.cycles/serial/serial.mjs';
+// import controls from '@strudel.cycles/core/controls.mjs';
+import '../website/src/repl/prebake';
+
+class MockedNode {
+  chain() {
+    return this;
+  }
+  connect() {
+    return this;
+  }
+  toDestination() {
+    return this;
+  }
+  set() {
+    return this;
+  }
+  start() {
+    return this;
+  }
+}
+
+const mockNode = () => new MockedNode();
+
+const id = (x) => x;
+
+const toneHelpersMocked = {
+  FeedbackDelay: MockedNode,
+  MembraneSynth: MockedNode,
+  NoiseSynth: MockedNode,
+  MetalSynth: MockedNode,
+  Synth: MockedNode,
+  PolySynth: MockedNode,
+  Chorus: MockedNode,
+  Freeverb: MockedNode,
+  Gain: MockedNode,
+  Reverb: MockedNode,
+  vol: mockNode,
+  out: id,
+  osc: id,
+  adsr: id,
+  getDestination: id,
+  players: mockNode,
+  sampler: mockNode,
+  synth: mockNode,
+  piano: mockNode,
+  polysynth: mockNode,
+  fmsynth: mockNode,
+  membrane: mockNode,
+  noise: mockNode,
+  metal: mockNode,
+  lowpass: mockNode,
+  highpass: mockNode,
+};
+
+strudel.Pattern.prototype.osc = function () {
+  return this;
+};
+strudel.Pattern.prototype.csound = function () {
+  return this;
+};
+strudel.Pattern.prototype.tone = function () {
+  return this;
+};
+strudel.Pattern.prototype.webdirt = function () {
+  return this;
+};
+
+// draw mock
+strudel.Pattern.prototype.pianoroll = function () {
+  return this;
+};
+
+// speak mock
+strudel.Pattern.prototype.speak = function () {
+  return this;
+};
+
+// webaudio mock
+strudel.Pattern.prototype.wave = function () {
+  return this;
+};
+strudel.Pattern.prototype.filter = function () {
+  return this;
+};
+strudel.Pattern.prototype.adsr = function () {
+  return this;
+};
+strudel.Pattern.prototype.out = function () {
+  return this;
+};
+strudel.Pattern.prototype.soundfont = function () {
+  return this;
+};
+// tune mock
+strudel.Pattern.prototype.tune = function () {
+  return this;
+};
+
+strudel.Pattern.prototype.midi = function () {
+  return this;
+};
+
+const uiHelpersMocked = {
+  backgroundImage: id,
+};
+
+const canvasCtx = {
+  clearRect: () => {},
+  fillText: () => {},
+  fillRect: () => {},
+  canvas: {
+    width: 100,
+    height: 100,
+  },
+};
+const audioCtx = {
+  currentTime: 1,
+};
+const getDrawContext = () => canvasCtx;
+const getAudioContext = () => audioCtx;
+const loadSoundfont = () => {};
+const loadCsound = () => {};
+const loadCSound = () => {};
+const loadcsound = () => {};
+
+// TODO: refactor to evalScope
+evalScope(
+  // Tone,
+  strudel,
+  toneHelpersMocked,
+  uiHelpersMocked,
+  controls,
+  webaudio,
+  tonalHelpers,
+  /* controls,
+  toneHelpers,
+  voicingHelpers,
+  drawHelpers,
+  uiHelpers,
+  */
+  {
+    // gist,
+    // euclid,
+    csound: id,
+    loadOrc: id,
+    mini,
+    getDrawContext,
+    getAudioContext,
+    loadSoundfont,
+    loadCSound,
+    loadCsound,
+    loadcsound,
+    Clock: {}, // whatever
+    // Tone,
+  },
+);
+
+export const queryCode = async (code, cycles = 1) => {
+  const { pattern } = await evaluate(code);
+  const haps = pattern.queryArc(0, cycles);
+  return haps.map((h) => h.show(true));
+};
+
+export const testCycles = {
+  timeCatMini: 16,
+  timeCat: 8,
+  shapeShifted: 16,
+  tetrisMini: 16,
+  whirlyStrudel: 16,
+  swimming: 51,
+  giantSteps: 20,
+  giantStepsReggae: 25,
+  transposedChordsHacked: 8,
+  scaleTranspose: 16,
+  struct: 4,
+  magicSofa: 8,
+  confusedPhone: 8,
+  zeldasRescue: 48,
+  technoDrums: 4,
+  caverave: 60,
+  callcenterhero: 22,
+  primalEnemy: 4,
+  synthDrums: 4,
+  sampleDrums: 4,
+  xylophoneCalling: 60,
+  sowhatelse: 60,
+  barryHarris: 64,
+  wavyKalimba: 64,
+  jemblung: 12,
+  risingEnemy: 12,
+  festivalOfFingers: 16,
+  festivalOfFingers2: 22,
+  undergroundPlumber: 20,
+  bridgeIsOver: 16,
+  goodTimes: 16,
+  echoPiano: 8,
+  sml1: 48,
+  speakerman: 48,
+  randomBells: 24,
+  waa: 16,
+  waar: 16,
+  hyperpop: 10,
+  festivalOfFingers3: 16,
+};
+
+// fixed: https://strudel.tidalcycles.org/?DBp75NUfSxIn (missing .note())
+// bug: https://strudel.tidalcycles.org/?xHaKTd1kTpCn + https://strudel.tidalcycles.org/?o5LLePbx8kiQ

test/shared.test.mjs

@@ -0,0 +1,17 @@
+import { queryCode } from '../runtime.mjs';
+import { describe, it } from 'vitest';
+import data from './dbdump.json';
+
+describe('renders shared tunes', async () => {
+  data.forEach(({ id, code, hash }) => {
+    const url = `https://strudel.tidalcycles.org/?${hash}`;
+    it(`shared tune ${id} ${url}`, async ({ expect }) => {
+      if (code.includes('import(')) {
+        console.log('skip', url);
+        return;
+      }
+      const haps = await queryCode(code, 1);
+      expect(haps).toMatchSnapshot();
+    });
+  });
+});

test/testtunes.mjs

@@ -0,0 +1,457 @@
+export const timeCatMini = `stack(
+  "c3@3 [eb3, g3, [c4 d4]/2]",
+  "c2 g2",
+  "[eb4@5 [f4 eb4 d4]@3] [eb4 c4]/2".slow(8)
+)`;
+
+export const timeCat = `stack(
+  timeCat([3, c3], [1, stack(eb3, g3, seq(c4, d4).slow(2))]),
+  seq(c2, g2),
+  seq(
+    timeCat([5, eb4], [3, seq(f4, eb4, d4)]), 
+    seq(eb4, c4).slow(2)
+  ).slow(4)
+)`;
+
+export const shapeShifted = `stack(
+  seq(
+    e5, [b4, c5], d5, [c5, b4],
+    a4, [a4, c5], e5, [d5, c5],
+    b4, [r, c5], d5, e5,
+    c5, a4, a4, r,
+    [r, d5], [r, f5], a5, [g5, f5],
+    e5, [r, c5], e5, [d5, c5],
+    b4, [b4, c5], d5, e5,
+    c5, a4, a4, r,
+  ).rev(),
+  seq(
+    e2, e3, e2, e3, e2, e3, e2, e3,
+    a2, a3, a2, a3, a2, a3, a2, a3,
+    gs2, gs3, gs2, gs3, e2, e3, e2, e3,
+    a2, a3, a2, a3, a2, a3, b1, c2,
+    d2, d3, d2, d3, d2, d3, d2, d3,
+    c2, c3, c2, c3, c2, c3, c2, c3,
+    b1, b2, b1, b2, e2, e3, e2, e3,
+    a1, a2, a1, a2, a1, a2, a1, a2,
+  ).rev()
+).slow(16)`;
+
+/* export const tetrisWithFunctions = `stack(seq(
+  'e5', seq('b4', 'c5'), 'd5', seq('c5', 'b4'),
+  'a4', seq('a4', 'c5'), 'e5', seq('d5', 'c5'),
+  'b4', seq(r, 'c5'), 'd5', 'e5',
+  'c5', 'a4', 'a4', r,
+  seq(r, 'd5'), seq(r, 'f5'), 'a5', seq('g5', 'f5'),
+  'e5', seq(r, 'c5'), 'e5', seq('d5', 'c5'),
+  'b4', seq('b4', 'c5'), 'd5', 'e5',
+  'c5', 'a4', 'a4', r),
+  seq(
+    'e2', 'e3', 'e2', 'e3', 'e2', 'e3', 'e2', 'e3',
+    'a2', 'a3', 'a2', 'a3', 'a2', 'a3', 'a2', 'a3',
+    'g#2', 'g#3', 'g#2', 'g#3', 'e2', 'e3', 'e2', 'e3',
+    'a2', 'a3', 'a2', 'a3', 'a2', 'a3', 'b1', 'c2',
+    'd2', 'd3', 'd2', 'd3', 'd2', 'd3', 'd2', 'd3',
+    'c2', 'c3', 'c2', 'c3', 'c2', 'c3', 'c2', 'c3',
+    'b1', 'b2', 'b1', 'b2', 'e2', 'e3', 'e2', 'e3',
+    'a1', 'a2', 'a1', 'a2', 'a1', 'a2', 'a1', 'a2',
+  )
+).slow(16)`; */
+
+/* export const tetris = `stack(
+  seq(
+    "e5 [b4 c5] d5 [c5 b4]",
+    "a4 [a4 c5] e5 [d5 c5]",
+    "b4 [~ c5] d5 e5",
+    "c5 a4 a4 ~",
+    "[~ d5] [~ f5] a5 [g5 f5]",
+    "e5 [~ c5] e5 [d5 c5]",
+    "b4 [b4 c5] d5 e5",
+    "c5 a4 a4 ~"
+  ),
+  seq(
+    "e2 e3 e2 e3 e2 e3 e2 e3",
+    "a2 a3 a2 a3 a2 a3 a2 a3",
+    "g#2 g#3 g#2 g#3 e2 e3 e2 e3",
+    "a2 a3 a2 a3 a2 a3 b1 c2",
+    "d2 d3 d2 d3 d2 d3 d2 d3",
+    "c2 c3 c2 c3 c2 c3 c2 c3",
+    "b1 b2 b1 b2 e2 e3 e2 e3",
+    "a1 a2 a1 a2 a1 a2 a1 a2",
+  )
+).slow(16)`;
+ */
+
+export const whirlyStrudel = `seq(e4, [b2,  b3], c4)
+.every(4, fast(2))
+.every(3, slow(1.5))
+.fast(cat(1.25, 1, 1.5))
+.every(2, _ => seq(e4, r, e3, d4, r))`;
+
+export const transposedChordsHacked = `stack(
+  "c2 eb2 g2",
+  "Cm7".voicings('lefthand').slow(2)
+).transpose(
+  "<1 2 3 2>".slow(2)
+).transpose(5)`;
+// range ['g2','c4']
+
+export const scaleTranspose = `"f2,f3,c4,ab4"
+.scale(seq('F minor', 'F harmonic minor').slow(4))
+.scaleTranspose("<0 -1 -2 -3>")
+.transpose("0 1".slow(16))`;
+
+export const struct = `stack(
+  "c2 g2 a2 [e2@2 eb2] d2 a2 g2 [d2 ~ db2]",
+  "[C^7 A7] [Dm7 G7]".struct("[x@2 x] [~@2 x] [~ x@2]@2 [x ~@2] ~ [~@2 x@4]@2")
+  .voicings('lefthand')
+).slow(4)`;
+// range ['G3','A4']
+
+export const magicSofa = `stack(
+  "<C^7 F^7 ~> <Dm7 G7 A7 ~>"
+   .every(2, fast(2))
+   .voicings('lefthand'),
+  "<c2 f2 g2> <d2 g2 a2 e2>"
+).transpose("<0 2 3 4>")`;
+// below doesn't work anymore due to constructor cleanup
+// ).slow(1).transpose.cat(0, 2, 3, 4)`;
+
+export const confusedPhone = `"[g2 ~@1.3] [c3 ~@1.3]"
+.superimpose(
+  transpose(-12).late(0),
+  transpose(7).late(0.1),
+  transpose(10).late(0.2),
+  transpose(12).late(0.3),
+  transpose(24).late(0.4)
+)
+.scale(cat('C dorian', 'C mixolydian'))
+.scaleTranspose("<0 1 2 1>")
+.slow(2)`;
+
+export const technoDrums = `stack(
+  "c1*2".tone(new MembraneSynth().toDestination()),
+  "~ x".tone(new NoiseSynth().toDestination()),
+  "[~ c4]*2".tone(new MetalSynth().set({envelope:{decay:0.06,sustain:0}}).chain(new Gain(0.5),getDestination()))
+)`;
+
+/*
+export const caverave = `const delay = new FeedbackDelay(1/8, .4).chain(vol(0.5), out());
+const kick = new MembraneSynth().chain(vol(.8), out());
+const snare = new NoiseSynth().chain(vol(.8), out());
+const hihat = new MetalSynth().set(adsr(0, .08, 0, .1)).chain(vol(.3).connect(delay),out());
+const bass = new Synth().set({ ...osc('sawtooth'), ...adsr(0, .1, .4) }).chain(lowpass(900), vol(.5), out());
+const keys = new PolySynth().set({ ...osc('sawtooth'), ...adsr(0, .5, .2, .7) }).chain(lowpass(1200), vol(.5), out());
+
+const drums = stack(
+  "c1*2".tone(kick).mask("<x@7 ~>/8"),
+  "~ <x!7 [x@3 x]>".tone(snare).mask("<x@7 ~>/4"),
+  "[~ c4]*2".tone(hihat)
+);
+
+const thru = (x) => x.transpose("<0 1>/8").transpose(-1);
+const synths = stack(
+  "<eb4 d4 c4 b3>/2".scale(timeCat([3,'C minor'],[1,'C melodic minor']).slow(8)).struct("[~ x]*2")
+  .layer(
+    scaleTranspose(0).early(0),
+    scaleTranspose(2).early(1/8),
+    scaleTranspose(7).early(1/4),
+    scaleTranspose(8).early(3/8)
+  ).apply(thru).tone(keys).mask("<~ x>/16"),
+  "<C2 Bb1 Ab1 [G1 [G2 G1]]>/2".struct("[x [~ x] <[~ [~ x]]!3 [x x]>@2]/2".fast(2)).apply(thru).tone(bass),
+  "<Cm7 Bb7 Fm7 G7b13>/2".struct("~ [x@0.1 ~]".fast(2)).voicings('lefthand').apply(thru).every(2, early(1/8)).tone(keys).mask("<x@7 ~>/8".early(1/4))
+)
+stack(
+  drums.fast(2), 
+  synths
+).slow(2)`; */
+
+export const tetrisMini = `note(\`[[e5 [b4 c5] d5 [c5 b4]]
+[a4 [a4 c5] e5 [d5 c5]]
+[b4 [~ c5] d5 e5]
+[c5 a4 a4 ~]
+[[~ d5] [~ f5] a5 [g5 f5]]
+[e5 [~ c5] e5 [d5 c5]]
+[b4 [b4 c5] d5 e5]
+[c5 a4 a4 ~]],
+[[e2 e3]*4]
+[[a2 a3]*4]
+[[g#2 g#3]*2 [e2 e3]*2]
+[a2 a3 a2 a3 a2 a3 b1 c2]
+[[d2 d3]*4]
+[[c2 c3]*4]
+[[b1 b2]*2 [e2 e3]*2]
+[[a1 a2]*4]\`).slow(16)
+`;
+
+export const giantStepsReggae = `stack(
+  // melody
+  seq(
+    "[F#5 D5] [B4 G4] Bb4 [B4 A4]",
+    "[D5 Bb4] [G4 Eb4] F#4 [G4 F4]",
+    "Bb4 [B4 A4] D5 [D#5 C#5]",
+    "F#5 [G5 F5] Bb5 [F#5 [F#5 ~@3]]",
+  ),
+  // chords
+  seq(
+    "[B^7 D7] [G^7 Bb7] Eb^7 [Am7 D7]",
+    "[G^7 Bb7] [Eb^7 F#7] B^7 [Fm7 Bb7]",
+    "Eb^7 [Am7 D7] G^7 [C#m7 F#7]",
+    "B^7 [Fm7 Bb7] Eb^7 [C#m7 F#7]"
+  )
+  .struct("~ [x ~]".fast(4*8))
+  .voicings('lefthand'),
+  // bass
+  seq(
+    "[B2 D2] [G2 D2] [Eb2 Bb2] [A2 D2]",
+    "[G2 Bb2] [Eb2 F#2] [B2 F#2] [F2 Bb2]",
+    "[Eb2 Bb2] [A2 D2] [G2 D2] [C#2 F#2]",
+    "[B2 F#2] [F2 Bb2] [Eb2 Bb2] [C#2 F#2]"
+  )
+  .struct("x ~".fast(4*8))
+).slow(25).note()`;
+
+// range ['E3', 'G4']
+
+// TODO:
+/*
+export const xylophoneCalling = `// licensed with CC BY-NC-SA 4.0 https://creativecommons.org/licenses/by-nc-sa/4.0/
+// by Felix Roos
+const t = x => x.scaleTranspose("<0 2 4 3>/4").transpose(-2)
+const s = x => x.scale(cat('C3 minor pentatonic','G3 minor pentatonic').slow(4))
+const delay = new FeedbackDelay(1/8, .6).chain(vol(0.1), out());
+const chorus = new Chorus(1,2.5,0.5).start();
+stack(
+  // melody
+  "<<10 7> <8 3>>/4".struct("x*3").apply(s)
+  .scaleTranspose("<0 3 2> <1 4 3>")
+  .superimpose(scaleTranspose(2).early(1/8))
+  .apply(t).tone(polysynth().set({
+    ...osc('triangle4'),
+    ...adsr(0,.08,0)
+  }).chain(vol(0.2).connect(delay),chorus,out())).mask("<~@3 x>/16".early(1/8)),
+  // pad
+  "[1,3]/4".scale('G3 minor pentatonic').apply(t).tone(polysynth().set({
+    ...osc('square2'),
+    ...adsr(0.1,.4,0.8)
+  }).chain(vol(0.2),chorus,out())).mask("<~ x>/32"),
+  // xylophone
+  "c3,g3,c4".struct("<x*2 x>").fast("<1 <2!3 [4 8]>>").apply(s).scaleTranspose("<0 <1 [2 [3 <4 5>]]>>").apply(t).tone(polysynth().set({
+    ...osc('sawtooth4'),
+    ...adsr(0,.1,0)
+  }).chain(vol(0.4).connect(delay),out())).mask("<x@3 ~>/16".early(1/8)),
+  // bass
+  "c2 [c2 ~]*2".scale('C hirajoshi').apply(t).tone(synth({
+    ...osc('sawtooth6'),
+    ...adsr(0,.03,.4,.1)
+  }).chain(vol(0.4),out())),
+  // kick
+  "<c1!3 [c1 ~]*2>*2".tone(membrane().chain(vol(0.8),out())),
+  // snare
+  "~ <c3!7 [c3 c3*2]>".tone(noise().chain(vol(0.8),out())),
+  // hihat
+  "c3*4".transpose("[-24 0]*2").tone(metal(adsr(0,.02)).chain(vol(0.5).connect(delay),out()))
+).slow(1)
+// strudel disable-highlighting`;
+*/
+
+// TODO:
+/*
+export const sowhatelse = `// licensed with CC BY-NC-SA 4.0 https://creativecommons.org/licenses/by-nc-sa/4.0/
+// by Felix Roos
+// mixer
+const mix = (key) => vol({
+  chords: .2,
+  lead: 0.8,
+  bass:  .4,
+  snare: .95, 
+  kick:  .9,
+  hihat: .35,
+}[key]||0);
+const delay = new FeedbackDelay(1/6, .3).chain(vol(.7), out());
+const delay2 = new FeedbackDelay(1/6, .2).chain(vol(.15), out());
+const chorus = new Chorus(1,2.5,0.5).start();
+// instruments
+const instr = (instrument) => ({
+  organ: polysynth().set({...osc('sawtooth4'), ...adsr(.01,.2,0)}).chain(mix('chords').connect(delay),out()),
+  lead: polysynth().set({...osc('triangle4'),...adsr(0.01,.05,0)}).chain(mix('lead').connect(delay2), out()),
+  bass: polysynth().set({...osc('sawtooth8'),...adsr(.02,.05,.3,.2)}).chain(mix('bass'),lowpass(3000), out()),
+  pad: polysynth().set({...osc('square2'),...adsr(0.1,.4,0.8)}).chain(vol(0.15),chorus,out()),
+  hihat: metal(adsr(0, .02, 0)).chain(mix('hihat'), out()),
+  snare: noise(adsr(0, .15,  0.01)).chain(mix('snare'), lowpass(5000), out()),
+  kick: membrane().chain(mix('kick'), out())
+}[instrument]);
+// harmony
+const t = transpose("<0 0 1 0>/8");
+const sowhat = scaleTranspose("0,3,6,9,11");
+// track
+stack(
+  "[<0 4 [3 [2 1]]>]/4".struct("[x]*3").mask("[~ x ~]").scale('D5 dorian').off(1/6, scaleTranspose(-7)).off(1/3, scaleTranspose(-5)).apply(t).tone(instr('lead')).mask("<~ ~ x x>/8"),
+  "<<e3 [~@2 a3]> <[d3 ~] [c3 f3] g3>>".scale('D dorian').apply(sowhat).apply(t).tone(instr('organ')).mask("<x x x ~>/8"),
+  "<[d2 [d2 ~]*3]!3 <a1*2 c2*3 [a1 e2]>>".apply(t).tone(instr('bass')),
+  "c1*6".tone(instr('hihat')),
+  "~ c3".tone(instr('snare')),
+  "<[c1@5 c1] <c1 [[c1@2 c1] ~] [c1 ~ c1] [c1!2 ~ c1!3]>>".tone(instr('kick')),
+  "[2,4]/4".scale('D dorian').apply(t).tone(instr('pad')).mask("<x x x ~>/8")
+).fast(6/8)
+// strudel disable-highlighting`;
+*/
+
+// TODO: rework tune to use freq
+/*
+export const jemblung = `// licensed with CC BY-NC-SA 4.0 https://creativecommons.org/licenses/by-nc-sa/4.0/
+// by Felix Roos
+const delay = new FeedbackDelay(1/8, .6).chain(vol(0.15), out());
+const snare = noise({type:'white',...adsr(0,0.2,0)}).chain(lowpass(5000),vol(1.8),out());
+const s = polysynth().set({...osc('sawtooth4'),...adsr(0.01,.2,.6,0.2)}).chain(vol(.23).connect(delay),out());
+stack(
+  stack(
+    "0 1 4 [3!2 5]".layer(
+      // chords
+      x=>x.add("0,3").duration("0.05!3 0.02"),
+      // bass
+      x=>x.add("-8").struct("x*8").duration(0.1) 
+    ),
+    // melody
+    "12 11*3 12 ~".duration(0.005) 
+  )
+  .add("<0 1>")
+  .tune("jemblung2")
+  //.mul(22/5).round().xen("22edo")
+  //.mul(12/5).round().xen("12edo")
+  .tone(s),
+  // kick
+  "[c2 ~]*2".duration(0.05).tone(membrane().chain(out())), 
+  // snare
+  "[~ c1]*2".early(0.001).tone(snare),
+  // hihat
+  "c2*8".tone(noise().chain(highpass(6000),vol(0.5).connect(delay),out())),
+).slow(3)`;
+*/
+
+/*
+// TODO: does not work on linux (at least for me..)
+export const speakerman = `// licensed with CC BY-NC-SA 4.0 https://creativecommons.org/licenses/by-nc-sa/4.0/
+// by Felix Roos
+backgroundImage('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.ytimg.com%2Fvi%2FXR0rKqW3VwY%2Fmaxresdefault.jpg&f=1&nofb=1', 
+{ className:'darken', style:'background-size:cover'})
+stack(
+  "[g3,bb3,d4] [f3,a3,c4] [c3,e3,g3]@2".slow(2).late(.1),
+  cat(
+  'Baker man',
+  'is baking bread',
+  'Baker man',
+  'is baking bread',
+  'Sagabona',
+  'kunjani wena',
+  'Sagabona',
+  'kunjani wena',
+  'The night train, is coming',
+  'got to keep on running',
+  'The night train, is coming',
+  'got to keep on running',
+  ).speak("en zu en".slow(12), "<0 2 3 4 5 6>".slow(2)),
+).slow(4)`;
+*/
+
+export const bossa = `const scales = sequence('C minor', ['D locrian', 'G phrygian'], 'Bb2 minor', ['C locrian','F phrygian']).slow(4)
+stack(
+  "<Cm7 [Dm7b5 G7b9] Bbm7 [Cm7b5 F7b9]>".fast(2).struct("x ~ x@3 x ~ x ~ ~ ~ x ~ x@3".late(1/8)).early(1/8).slow(2).voicings('lefthand'),
+  "[~ [0 ~]] 0 [~ [4 ~]] 4".sub(7).restart(scales).scale(scales).early(.25)
+).note().piano().slow(2)`;
+
+/* 
+export const customTrigger = `// licensed with CC BY-NC-SA 4.0 https://creativecommons.org/licenses/by-nc-sa/4.0/
+// by Felix Roos
+stack(
+  freq("55 [110,165] 110 [220,275]".mul("<1 <3/4 2/3>>").struct("x(3,8)").layer(x=>x.mul("1.006,.995"))),
+  freq("440(5,8)".legato(.18).mul("<1 3/4 2 2/3>")).gain(perlin.range(.2,.8))
+).s("<sawtooth square>/2")
+  .onTrigger((t,hap,ct)=>{
+  const ac = Tone.getContext().rawContext;
+  t = ac.currentTime + t - ct;
+  const { freq, s, gain = 1 } = hap.value;
+  const master = ac.createGain();
+  master.gain.value = 0.1 * gain;
+  master.connect(ac.destination);
+  const o = ac.createOscillator();
+  o.type = s || 'triangle';
+  o.frequency.value = Number(freq);
+  o.connect(master);
+  o.start(t);
+  o.stop(t + hap.duration);
+}).stack(s("bd(3,8),hh*4,~ sd").webdirt())`; */
+
+export const swimmingWithSoundfonts = `// Koji Kondo - Swimming (Super Mario World)
+stack(
+    n(
+      "~",
+      "~",
+      "~",
+      "A5 [F5@2 C5] [D5@2 F5] F5",
+      "[C5@2 F5] [F5@2 C6] A5 G5",
+      "A5 [F5@2 C5] [D5@2 F5] F5",
+      "[C5@2 F5] [Bb5 A5 G5] F5@2",
+      "A5 [F5@2 C5] [D5@2 F5] F5",
+      "[C5@2 F5] [F5@2 C6] A5 G5",
+      "A5 [F5@2 C5] [D5@2 F5] F5",
+      "[C5@2 F5] [Bb5 A5 G5] F5@2",
+      "A5 [F5@2 C5] A5 F5",
+      "Ab5 [F5@2 Ab5] G5@2",
+      "A5 [F5@2 C5] A5 F5",
+      "Ab5 [F5@2 C5] C6@2",
+      "A5 [F5@2 C5] [D5@2 F5] F5",
+      "[C5@2 F5] [Bb5 A5 G5] F5@2"
+    ).s('Sitar: Ethnic'),
+    n(
+      "[F4,Bb4,D5] [[D4,G4,Bb4]@2 [Bb3,D4,F4]] [[G3,C4,E4]@2 [[Ab3,F4] [A3,Gb4]]] [Bb3,E4,G4]",
+      "[~ [F3, A3, C3] [F3, A3, C3]] [~ [F3, A3, C3] [F3, A3, C3]] [~ [F3, Bb3, D3] [F3, Bb3, D3]] [~ [F3, Bb3, Db3] [F3, Bb3, Db3]]",
+      "[~ [F3, A3, C3] [F3, A3, C3]] [~ [F3, A3, C3] [F3, A3, C3]] [~ [F3, Bb3, D3] [F3, Bb3, D3]] [~ [F3, B3, D3] [F3, B3, D3]]",
+      "[~ [F3, A3, C3] [F3, A3, C3]] [~ [F3, A3, C3] [F3, A3, C3]] [~ [F3, Bb3, D3] [F3, Bb3, D3]] [~ [F3, B3, D3] [F3, B3, D3]]",
+      "[~ [A3, C4, E4] [A3, C4, E4]] [~ [Ab3, C4, Eb4] [Ab3, C4, Eb4]] [~ [F3, Bb3, D3] [F3, Bb3, D3]] [~ [G3, C4, E4] [G3, C4, E4]]",
+      "[~ [F3, A3, C4] [F3, A3, C4]] [~ [F3, A3, C4] [F3, A3, C4]] [~ [F3, Bb3, D3] [F3, Bb3, D3]] [~ [F3, B3, D3] [F3, B3, D3]]",
+      "[~ [F3, Bb3, D4] [F3, Bb3, D4]] [~ [F3, Bb3, C4] [F3, Bb3, C4]] [~ [F3, A3, C4] [F3, A3, C4]] [~ [F3, A3, C4] [F3, A3, C4]]",
+      "[~ [F3, A3, C3] [F3, A3, C3]] [~ [F3, A3, C3] [F3, A3, C3]] [~ [F3, Bb3, D3] [F3, Bb3, D3]] [~ [F3, B3, D3] [F3, B3, D3]]",
+      "[~ [A3, C4, E4] [A3, C4, E4]] [~ [Ab3, C4, Eb4] [Ab3, C4, Eb4]] [~ [F3, Bb3, D3] [F3, Bb3, D3]] [~ [G3, C4, E4] [G3, C4, E4]]",
+      "[~ [F3, A3, C3] [F3, A3, C3]] [~ [F3, A3, C3] [F3, A3, C3]] [~ [F3, Bb3, D3] [F3, Bb3, D3]] [~ [F3, B3, D3] [F3, B3, D3]]",
+      "[~ [F3, Bb3, D4] [F3, Bb3, D4]] [~ [F3, Bb3, C4] [F3, Bb3, C4]] [~ [F3, A3, C4] [F3, A3, C4]] [~ [F3, A3, C4] [F3, A3, C4]]",
+      "[~ [Bb3, D3, F4] [Bb3, D3, F4]] [~ [Bb3, D3, F4] [Bb3, D3, F4]] [~ [A3, C4, F4] [A3, C4, F4]] [~ [A3, C4, F4] [A3, C4, F4]]",
+      "[~ [Ab3, B3, F4] [Ab3, B3, F4]] [~ [Ab3, B3, F4] [Ab3, B3, F4]] [~ [G3, Bb3, F4] [G3, Bb3, F4]] [~ [G3, Bb3, E4] [G3, Bb3, E4]]",
+      "[~ [Bb3, D3, F4] [Bb3, D3, F4]] [~ [Bb3, D3, F4] [Bb3, D3, F4]] [~ [A3, C4, F4] [A3, C4, F4]] [~ [A3, C4, F4] [A3, C4, F4]]",
+      "[~ [Ab3, B3, F4] [Ab3, B3, F4]] [~ [Ab3, B3, F4] [Ab3, B3, F4]] [~ [G3, Bb3, F4] [G3, Bb3, F4]] [~ [G3, Bb3, E4] [G3, Bb3, E4]]",
+      "[~ [F3, A3, C3] [F3, A3, C3]] [~ [F3, A3, C3] [F3, A3, C3]] [~ [F3, Bb3, D3] [F3, Bb3, D3]] [~ [F3, B3, D3] [F3, B3, D3]]",
+      "[~ [F3, Bb3, D4] [F3, Bb3, D4]] [~ [F3, Bb3, C4] [F3, Bb3, C4]] [~ [F3, A3, C4] [F3, A3, C4]] [~ [F3, A3, C4] [F3, A3, C4]]"
+    ).s('Kalimba: Ethnic'),
+    n(
+      "[G3 G3 C3 E3]",
+      "[F2 D2 G2 C2]",
+      "[F2 D2 G2 C2]",
+      "[F2 A2 Bb2 B2]",
+      "[A2 Ab2 G2 C2]",
+      "[F2 A2 Bb2 B2]",
+      "[G2 C2 F2 F2]",
+      "[F2 A2 Bb2 B2]",
+      "[A2 Ab2 G2 C2]",
+      "[F2 A2 Bb2 B2]",
+      "[G2 C2 F2 F2]",
+      "[Bb2 Bb2 A2 A2]",
+      "[Ab2 Ab2 G2 [C2 D2 E2]]",
+      "[Bb2 Bb2 A2 A2]",
+      "[Ab2 Ab2 G2 [C2 D2 E2]]",
+      "[F2 A2 Bb2 B2]",
+      "[G2 C2 F2 F2]"
+    ).s('Acoustic Bass: Bass')
+  ).slow(51)
+    `;
+
+export const bossaRandom = `const chords = "<Am7 Am7 Dm7 E7>"
+const roots = chords.rootNotes(2)
+
+stack(
+  chords.voicings('lefthand').struct(
+  \` x@2   ~ x ~ ~ ~ x |
+    x?  ~ ~ x@3   ~ x |
+    x?  ~ ~ x ~ x@3\`),
+  roots.struct("x [~ x?0.2] x [~ x?] | x!4 | x@2 ~ ~ ~ x x x").transpose("0 7")
+).slow(2).pianoroll().note().piano()`;
+
+// range ['F4', 'A5']

test/tunes.test.mjs

@@ -0,0 +1,14 @@
+import { queryCode, testCycles } from './runtime.mjs';
+import * as tunes from '../website/src/repl/tunes.mjs';
+import { describe, it } from 'vitest';
+
+const tuneKeys = Object.keys(tunes);
+
+describe('renders tunes', () => {
+  tuneKeys.forEach((key) => {
+    it(`tune: ${key}`, async ({ expect }) => {
+      const haps = await queryCode(tunes[key], testCycles[key] || 1);
+      expect(haps).toMatchSnapshot();
+    });
+  });
+});

website/package-lock.json

@@ -15,11 +15,14 @@
         "@astrojs/tailwind": "^2.1.3",
         "@docsearch/css": "^3.1.0",
         "@docsearch/react": "^3.1.0",
+        "@heroicons/react": "^2.0.13",
+        "@supabase/supabase-js": "^1.35.3",
         "@tailwindcss/typography": "^0.5.8",
         "@types/node": "^18.0.0",
         "@types/react": "^18.0.26",
         "@types/react-dom": "^18.0.9",
         "astro": "^1.7.2",
+        "nanoid": "^4.0.0",
         "preact": "^10.7.3",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -787,6 +790,14 @@
         "node": ">=12"
       }
     },
+    "node_modules/@heroicons/react": {
+      "version": "2.0.13",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.0.13.tgz",
+      "integrity": "sha512-iSN5XwmagrnirWlYEWNPdCDj9aRYVD/lnK3JlsC9/+fqGF80k8C7rl+1HCvBX0dBoagKqOFBs6fMhJJ1hOg1EQ==",
+      "peerDependencies": {
+        "react": ">= 16"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
@@ -1006,6 +1017,59 @@
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
+    "node_modules/@supabase/functions-js": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-1.3.4.tgz",
+      "integrity": "sha512-yYVgkECjv7IZEBKBI3EB5Q7R1p0FJ10g8Q9N7SWKIHUU6i6DnbEGHIMFLyQRm1hmiNWD8fL7bRVEYacmTRJhHw==",
+      "dependencies": {
+        "cross-fetch": "^3.1.5"
+      }
+    },
+    "node_modules/@supabase/gotrue-js": {
+      "version": "1.24.0",
+      "resolved": "https://registry.npmjs.org/@supabase/gotrue-js/-/gotrue-js-1.24.0.tgz",
+      "integrity": "sha512-6PVv7mHCFOxLm6TSBfR7hsq/y3CMKpvzePVR+ZWtlFBTjJ2J87g2OYE9bgC61P5TNeZopUXKw93H92yz0MTALw==",
+      "dependencies": {
+        "cross-fetch": "^3.0.6"
+      }
+    },
+    "node_modules/@supabase/postgrest-js": {
+      "version": "0.37.4",
+      "resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-0.37.4.tgz",
+      "integrity": "sha512-x+c2rk1fz9s6f1PrGxCJ0QTUgXPDI0G3ngIqD5sSiXhhCyfl8Q5V92mXl2EYtlDhkiUkjFNrOZFhXVbXOHgvDw==",
+      "dependencies": {
+        "cross-fetch": "^3.1.5"
+      }
+    },
+    "node_modules/@supabase/realtime-js": {
+      "version": "1.7.5",
+      "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-1.7.5.tgz",
+      "integrity": "sha512-nXuoxt7NE1NTI+G8WBim1K2gkUC8YE3e9evBUG+t6xwd9Sq+sSOrjcE0qJ8/Y631BCnLzlhX6yhFYQFh1oQDOg==",
+      "dependencies": {
+        "@types/phoenix": "^1.5.4",
+        "websocket": "^1.0.34"
+      }
+    },
+    "node_modules/@supabase/storage-js": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-1.7.3.tgz",
+      "integrity": "sha512-jnIZWqOc9TGclOozgX9v/RWGFCgJAyW/yvmauexgRZhWknUXoA4b2i8tj7vfwE0WTvNRuA5JpXID98rfJeSG7Q==",
+      "dependencies": {
+        "cross-fetch": "^3.1.0"
+      }
+    },
+    "node_modules/@supabase/supabase-js": {
+      "version": "1.35.7",
+      "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-1.35.7.tgz",
+      "integrity": "sha512-X+qCzmj5sH0dozagbLoK7LzysBaWoivO0gsAUAPPBQkQupQWuBfaOqG18gKhlfL0wp2PL888QzhQNScp/IwUfA==",
+      "dependencies": {
+        "@supabase/functions-js": "^1.3.4",
+        "@supabase/gotrue-js": "^1.22.21",
+        "@supabase/postgrest-js": "^0.37.4",
+        "@supabase/realtime-js": "^1.7.5",
+        "@supabase/storage-js": "^1.7.2"
+      }
+    },
     "node_modules/@tailwindcss/typography": {
       "version": "0.5.8",
       "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.8.tgz",
@@ -1152,6 +1216,11 @@
       "resolved": "https://registry.npmjs.org/@types/parse5/-/parse5-6.0.3.tgz",
       "integrity": "sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g=="
     },
+    "node_modules/@types/phoenix": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.5.4.tgz",
+      "integrity": "sha512-L5eZmzw89eXBKkiqVBcJfU1QGx9y+wurRIEgt0cuLH0hwNtVUxtx+6cu0R2STwWj468sjXyBYPYDtGclUd1kjQ=="
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
@@ -1754,6 +1823,18 @@
         "ieee754": "^1.2.1"
       }
     },
+    "node_modules/bufferutil": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/bufferutil/-/bufferutil-4.0.7.tgz",
+      "integrity": "sha512-kukuqc39WOHtdxtw4UScxF/WVnMFVSQVKhtx3AjZJzhd0RGZZldcrfSEbVsWWe6KNH253574cq5F+wpv0G9pJw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "node-gyp-build": "^4.3.0"
+      },
+      "engines": {
+        "node": ">=6.14.2"
+      }
+    },
     "node_modules/camelcase": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
@@ -1969,6 +2050,33 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/cross-fetch": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz",
+      "integrity": "sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==",
+      "dependencies": {
+        "node-fetch": "2.6.7"
+      }
+    },
+    "node_modules/cross-fetch/node_modules/node-fetch": {
+      "version": "2.6.7",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
+      "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -1998,6 +2106,15 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
       "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
     },
+    "node_modules/d": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz",
+      "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==",
+      "dependencies": {
+        "es5-ext": "^0.10.50",
+        "type": "^1.0.1"
+      }
+    },
     "node_modules/data-uri-to-buffer": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.0.tgz",
@@ -2181,11 +2298,44 @@
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.1.0.tgz",
       "integrity": "sha512-fJg+1tiyEeS8figV+fPcPpm8WqJEflG3yPU0NOm5xMvrNkuiy7HzX/Ljng4Y0hAoiw4/3hQTCFYw+ub8+a2pRA=="
     },
+    "node_modules/es5-ext": {
+      "version": "0.10.62",
+      "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.62.tgz",
+      "integrity": "sha512-BHLqn0klhEpnOKSrzn/Xsz2UIW8j+cGmo9JLzr8BiUapV8hPL9+FliFqjwr9ngW7jWdnxv6eO+/LqyhJVqgrjA==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "es6-iterator": "^2.0.3",
+        "es6-symbol": "^3.1.3",
+        "next-tick": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/es6-error": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/es6-error/-/es6-error-4.1.1.tgz",
       "integrity": "sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg=="
     },
+    "node_modules/es6-iterator": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
+      "integrity": "sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==",
+      "dependencies": {
+        "d": "1",
+        "es5-ext": "^0.10.35",
+        "es6-symbol": "^3.1.1"
+      }
+    },
+    "node_modules/es6-symbol": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz",
+      "integrity": "sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==",
+      "dependencies": {
+        "d": "^1.0.1",
+        "ext": "^1.1.2"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.15.18",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.15.18.tgz",
@@ -2647,6 +2797,19 @@
         "url": "https://github.com/sindresorhus/execa?sponsor=1"
       }
     },
+    "node_modules/ext": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/ext/-/ext-1.7.0.tgz",
+      "integrity": "sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==",
+      "dependencies": {
+        "type": "^2.7.2"
+      }
+    },
+    "node_modules/ext/node_modules/type": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/type/-/type-2.7.2.tgz",
+      "integrity": "sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw=="
+    },
     "node_modules/extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
@@ -3454,6 +3617,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-typedarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA=="
+    },
     "node_modules/is-unicode-supported": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-1.3.0.tgz",
@@ -4809,16 +4977,21 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "node_modules/nanoid": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-4.0.0.tgz",
+      "integrity": "sha512-IgBP8piMxe/gf73RTQx7hmnhwz0aaEXYakvqZyE302IXW3HyVNhdNGC+O2MwMAVhLEnvXlvKtGbtJf6wvHihCg==",
       "bin": {
-        "nanoid": "bin/nanoid.cjs"
+        "nanoid": "bin/nanoid.js"
       },
       "engines": {
-        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+        "node": "^14 || ^16 || >=18"
       }
     },
+    "node_modules/next-tick": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz",
+      "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ=="
+    },
     "node_modules/nlcst-to-string": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/nlcst-to-string/-/nlcst-to-string-3.1.0.tgz",
@@ -4866,6 +5039,16 @@
         "url": "https://opencollective.com/node-fetch"
       }
     },
+    "node_modules/node-gyp-build": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.5.0.tgz",
+      "integrity": "sha512-2iGbaQBV+ITgCz76ZEjmhUKAKVf7xfY1sRl4UiKQspfZMH2h06SyhNsnSVy50cwkFQDGLyif6m/6uFXHkOZ6rg==",
+      "bin": {
+        "node-gyp-build": "bin.js",
+        "node-gyp-build-optional": "optional.js",
+        "node-gyp-build-test": "build-test.js"
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.8",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.8.tgz",
@@ -5340,6 +5523,17 @@
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
+    "node_modules/postcss/node_modules/nanoid": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
     "node_modules/preact": {
       "version": "10.11.3",
       "resolved": "https://registry.npmjs.org/preact/-/preact-10.11.3.tgz",
@@ -6386,6 +6580,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
+    },
     "node_modules/trim-lines": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
@@ -6450,6 +6649,11 @@
         "node": ">=12"
       }
     },
+    "node_modules/type": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz",
+      "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg=="
+    },
     "node_modules/type-fest": {
       "version": "2.19.0",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
@@ -6461,6 +6665,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/typedarray-to-buffer": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
+      "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
+      "dependencies": {
+        "is-typedarray": "^1.0.0"
+      }
+    },
     "node_modules/typescript": {
       "version": "4.9.4",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
@@ -6668,6 +6880,18 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/utf-8-validate": {
+      "version": "5.0.10",
+      "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.10.tgz",
+      "integrity": "sha512-Z6czzLq4u8fPOyx7TU6X3dvUZVvoJmxSQ+IcrlmagKhilxlhZgxPK6C5Jqbkw1IDUmFTM+cz9QDnnLTwDz/2gQ==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "node-gyp-build": "^4.3.0"
+      },
+      "engines": {
+        "node": ">=6.14.2"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -6897,6 +7121,49 @@
         "node": ">= 8"
       }
     },
+    "node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
+    },
+    "node_modules/websocket": {
+      "version": "1.0.34",
+      "resolved": "https://registry.npmjs.org/websocket/-/websocket-1.0.34.tgz",
+      "integrity": "sha512-PRDso2sGwF6kM75QykIesBijKSVceR6jL2G8NGYyq2XrItNC2P5/qL5XeR056GhA+Ly7JMFvJb9I312mJfmqnQ==",
+      "dependencies": {
+        "bufferutil": "^4.0.1",
+        "debug": "^2.2.0",
+        "es5-ext": "^0.10.50",
+        "typedarray-to-buffer": "^3.1.5",
+        "utf-8-validate": "^5.0.2",
+        "yaeti": "^0.0.6"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/websocket/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/websocket/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
+    "node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -6993,6 +7260,14 @@
         "node": ">=0.4"
       }
     },
+    "node_modules/yaeti": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/yaeti/-/yaeti-0.0.6.tgz",
+      "integrity": "sha512-MvQa//+KcZCUkBTIC9blM+CU9J2GzuTytsOUwf2lidtvkx/6gnEp1QvJv34t9vdjhFmha/mUiNDbN0D0mJWdug==",
+      "engines": {
+        "node": ">=0.10.32"
+      }
+    },
     "node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -7641,6 +7916,12 @@
       "integrity": "sha512-L4jVKS82XVhw2nvzLg/19ClLWg0y27ulRwuP7lcyL6AbUWB5aPglXY3M21mauDQMDfRLs8cQmeT03r/+X3cZYQ==",
       "optional": true
     },
+    "@heroicons/react": {
+      "version": "2.0.13",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.0.13.tgz",
+      "integrity": "sha512-iSN5XwmagrnirWlYEWNPdCDj9aRYVD/lnK3JlsC9/+fqGF80k8C7rl+1HCvBX0dBoagKqOFBs6fMhJJ1hOg1EQ==",
+      "requires": {}
+    },
     "@jridgewell/gen-mapping": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
@@ -7802,6 +8083,59 @@
         }
       }
     },
+    "@supabase/functions-js": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-1.3.4.tgz",
+      "integrity": "sha512-yYVgkECjv7IZEBKBI3EB5Q7R1p0FJ10g8Q9N7SWKIHUU6i6DnbEGHIMFLyQRm1hmiNWD8fL7bRVEYacmTRJhHw==",
+      "requires": {
+        "cross-fetch": "^3.1.5"
+      }
+    },
+    "@supabase/gotrue-js": {
+      "version": "1.24.0",
+      "resolved": "https://registry.npmjs.org/@supabase/gotrue-js/-/gotrue-js-1.24.0.tgz",
+      "integrity": "sha512-6PVv7mHCFOxLm6TSBfR7hsq/y3CMKpvzePVR+ZWtlFBTjJ2J87g2OYE9bgC61P5TNeZopUXKw93H92yz0MTALw==",
+      "requires": {
+        "cross-fetch": "^3.0.6"
+      }
+    },
+    "@supabase/postgrest-js": {
+      "version": "0.37.4",
+      "resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-0.37.4.tgz",
+      "integrity": "sha512-x+c2rk1fz9s6f1PrGxCJ0QTUgXPDI0G3ngIqD5sSiXhhCyfl8Q5V92mXl2EYtlDhkiUkjFNrOZFhXVbXOHgvDw==",
+      "requires": {
+        "cross-fetch": "^3.1.5"
+      }
+    },
+    "@supabase/realtime-js": {
+      "version": "1.7.5",
+      "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-1.7.5.tgz",
+      "integrity": "sha512-nXuoxt7NE1NTI+G8WBim1K2gkUC8YE3e9evBUG+t6xwd9Sq+sSOrjcE0qJ8/Y631BCnLzlhX6yhFYQFh1oQDOg==",
+      "requires": {
+        "@types/phoenix": "^1.5.4",
+        "websocket": "^1.0.34"
+      }
+    },
+    "@supabase/storage-js": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-1.7.3.tgz",
+      "integrity": "sha512-jnIZWqOc9TGclOozgX9v/RWGFCgJAyW/yvmauexgRZhWknUXoA4b2i8tj7vfwE0WTvNRuA5JpXID98rfJeSG7Q==",
+      "requires": {
+        "cross-fetch": "^3.1.0"
+      }
+    },
+    "@supabase/supabase-js": {
+      "version": "1.35.7",
+      "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-1.35.7.tgz",
+      "integrity": "sha512-X+qCzmj5sH0dozagbLoK7LzysBaWoivO0gsAUAPPBQkQupQWuBfaOqG18gKhlfL0wp2PL888QzhQNScp/IwUfA==",
+      "requires": {
+        "@supabase/functions-js": "^1.3.4",
+        "@supabase/gotrue-js": "^1.22.21",
+        "@supabase/postgrest-js": "^0.37.4",
+        "@supabase/realtime-js": "^1.7.5",
+        "@supabase/storage-js": "^1.7.2"
+      }
+    },
     "@tailwindcss/typography": {
       "version": "0.5.8",
       "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.8.tgz",
@@ -7944,6 +8278,11 @@
       "resolved": "https://registry.npmjs.org/@types/parse5/-/parse5-6.0.3.tgz",
       "integrity": "sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g=="
     },
+    "@types/phoenix": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.5.4.tgz",
+      "integrity": "sha512-L5eZmzw89eXBKkiqVBcJfU1QGx9y+wurRIEgt0cuLH0hwNtVUxtx+6cu0R2STwWj468sjXyBYPYDtGclUd1kjQ=="
+    },
     "@types/prop-types": {
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
@@ -8392,6 +8731,14 @@
         "ieee754": "^1.2.1"
       }
     },
+    "bufferutil": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/bufferutil/-/bufferutil-4.0.7.tgz",
+      "integrity": "sha512-kukuqc39WOHtdxtw4UScxF/WVnMFVSQVKhtx3AjZJzhd0RGZZldcrfSEbVsWWe6KNH253574cq5F+wpv0G9pJw==",
+      "requires": {
+        "node-gyp-build": "^4.3.0"
+      }
+    },
     "camelcase": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
@@ -8523,6 +8870,24 @@
       "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
       "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw=="
     },
+    "cross-fetch": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz",
+      "integrity": "sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==",
+      "requires": {
+        "node-fetch": "2.6.7"
+      },
+      "dependencies": {
+        "node-fetch": {
+          "version": "2.6.7",
+          "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
+          "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
+          "requires": {
+            "whatwg-url": "^5.0.0"
+          }
+        }
+      }
+    },
     "cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -8543,6 +8908,15 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
       "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
     },
+    "d": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz",
+      "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==",
+      "requires": {
+        "es5-ext": "^0.10.50",
+        "type": "^1.0.1"
+      }
+    },
     "data-uri-to-buffer": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.0.tgz",
@@ -8675,11 +9049,40 @@
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.1.0.tgz",
       "integrity": "sha512-fJg+1tiyEeS8figV+fPcPpm8WqJEflG3yPU0NOm5xMvrNkuiy7HzX/Ljng4Y0hAoiw4/3hQTCFYw+ub8+a2pRA=="
     },
+    "es5-ext": {
+      "version": "0.10.62",
+      "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.62.tgz",
+      "integrity": "sha512-BHLqn0klhEpnOKSrzn/Xsz2UIW8j+cGmo9JLzr8BiUapV8hPL9+FliFqjwr9ngW7jWdnxv6eO+/LqyhJVqgrjA==",
+      "requires": {
+        "es6-iterator": "^2.0.3",
+        "es6-symbol": "^3.1.3",
+        "next-tick": "^1.1.0"
+      }
+    },
     "es6-error": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/es6-error/-/es6-error-4.1.1.tgz",
       "integrity": "sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg=="
     },
+    "es6-iterator": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
+      "integrity": "sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==",
+      "requires": {
+        "d": "1",
+        "es5-ext": "^0.10.35",
+        "es6-symbol": "^3.1.1"
+      }
+    },
+    "es6-symbol": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz",
+      "integrity": "sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==",
+      "requires": {
+        "d": "^1.0.1",
+        "ext": "^1.1.2"
+      }
+    },
     "esbuild": {
       "version": "0.15.18",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.15.18.tgz",
@@ -8912,6 +9315,21 @@
         "strip-final-newline": "^3.0.0"
       }
     },
+    "ext": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/ext/-/ext-1.7.0.tgz",
+      "integrity": "sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==",
+      "requires": {
+        "type": "^2.7.2"
+      },
+      "dependencies": {
+        "type": {
+          "version": "2.7.2",
+          "resolved": "https://registry.npmjs.org/type/-/type-2.7.2.tgz",
+          "integrity": "sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw=="
+        }
+      }
+    },
     "extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
@@ -9462,6 +9880,11 @@
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
       "integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA=="
     },
+    "is-typedarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA=="
+    },
     "is-unicode-supported": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-1.3.0.tgz",
@@ -10343,9 +10766,14 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "nanoid": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-4.0.0.tgz",
+      "integrity": "sha512-IgBP8piMxe/gf73RTQx7hmnhwz0aaEXYakvqZyE302IXW3HyVNhdNGC+O2MwMAVhLEnvXlvKtGbtJf6wvHihCg=="
+    },
+    "next-tick": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz",
+      "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ=="
     },
     "nlcst-to-string": {
       "version": "3.1.0",
@@ -10370,6 +10798,11 @@
         "formdata-polyfill": "^4.0.10"
       }
     },
+    "node-gyp-build": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.5.0.tgz",
+      "integrity": "sha512-2iGbaQBV+ITgCz76ZEjmhUKAKVf7xfY1sRl4UiKQspfZMH2h06SyhNsnSVy50cwkFQDGLyif6m/6uFXHkOZ6rg=="
+    },
     "node-releases": {
       "version": "2.0.8",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.8.tgz",
@@ -10627,6 +11060,13 @@
         "nanoid": "^3.3.4",
         "picocolors": "^1.0.0",
         "source-map-js": "^1.0.2"
+      },
+      "dependencies": {
+        "nanoid": {
+          "version": "3.3.4",
+          "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+          "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
+        }
       }
     },
     "postcss-import": {
@@ -11412,6 +11852,11 @@
       "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.0.tgz",
       "integrity": "sha512-eM+pCBxXO/njtF7vdFsHuqb+ElbxqtI4r5EAvk6grfAFyJ6IvWlSkfZ5T9ozC6xWw3Fj1fGoSmrl0gUs46JVIw=="
     },
+    "tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
+    },
     "trim-lines": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
@@ -11455,11 +11900,24 @@
         "esbuild": "^0.15.16"
       }
     },
+    "type": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz",
+      "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg=="
+    },
     "type-fest": {
       "version": "2.19.0",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
       "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA=="
     },
+    "typedarray-to-buffer": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
+      "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
+      "requires": {
+        "is-typedarray": "^1.0.0"
+      }
+    },
     "typescript": {
       "version": "4.9.4",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
@@ -11588,6 +12046,14 @@
         "picocolors": "^1.0.0"
       }
     },
+    "utf-8-validate": {
+      "version": "5.0.10",
+      "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.10.tgz",
+      "integrity": "sha512-Z6czzLq4u8fPOyx7TU6X3dvUZVvoJmxSQ+IcrlmagKhilxlhZgxPK6C5Jqbkw1IDUmFTM+cz9QDnnLTwDz/2gQ==",
+      "requires": {
+        "node-gyp-build": "^4.3.0"
+      }
+    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -11743,6 +12209,48 @@
       "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz",
       "integrity": "sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q=="
     },
+    "webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
+    },
+    "websocket": {
+      "version": "1.0.34",
+      "resolved": "https://registry.npmjs.org/websocket/-/websocket-1.0.34.tgz",
+      "integrity": "sha512-PRDso2sGwF6kM75QykIesBijKSVceR6jL2G8NGYyq2XrItNC2P5/qL5XeR056GhA+Ly7JMFvJb9I312mJfmqnQ==",
+      "requires": {
+        "bufferutil": "^4.0.1",
+        "debug": "^2.2.0",
+        "es5-ext": "^0.10.50",
+        "typedarray-to-buffer": "^3.1.5",
+        "utf-8-validate": "^5.0.2",
+        "yaeti": "^0.0.6"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+        }
+      }
+    },
+    "whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "requires": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
     "which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -11807,6 +12315,11 @@
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
       "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
     },
+    "yaeti": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/yaeti/-/yaeti-0.0.6.tgz",
+      "integrity": "sha512-MvQa//+KcZCUkBTIC9blM+CU9J2GzuTytsOUwf2lidtvkx/6gnEp1QvJv34t9vdjhFmha/mUiNDbN0D0mJWdug=="
+    },
     "yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",

website/package.json

@@ -27,7 +27,10 @@
     "preact": "^10.7.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "tailwindcss": "^3.2.4"
+    "tailwindcss": "^3.2.4",
+    "@heroicons/react": "^2.0.13",
+    "@supabase/supabase-js": "^1.35.3",
+    "nanoid": "^4.0.0"
   },
   "devDependencies": {
     "html-escaper": "^3.0.3"

website/public/CNAME

@@ -0,0 +1 @@
+strudel.tidalcycles.org

website/public/EmuSP12.json

@@ -0,0 +1,16 @@
+{
+"bd": ["bd/Bassdrum-01.wav","bd/Bassdrum-02.wav","bd/Bassdrum-03.wav","bd/Bassdrum-04.wav","bd/Bassdrum-05.wav","bd/Bassdrum-06.wav","bd/Bassdrum-07.wav","bd/Bassdrum-08.wav","bd/Bassdrum-09.wav","bd/Bassdrum-10.wav","bd/Bassdrum-11.wav","bd/Bassdrum-12.wav","bd/Bassdrum-13.wav","bd/Bassdrum-14.wav"],
+"cb": ["cb/Cowbell.wav"],
+"cp": ["cp/Clap.wav"],
+"cr": ["cr/Crash.wav"],
+"hh": ["hh/Hat Closed-01.wav","hh/Hat Closed-02.wav"],
+"ht": ["ht/Tom H-01.wav","ht/Tom H-02.wav","ht/Tom H-03.wav","ht/Tom H-04.wav","ht/Tom H-05.wav","ht/Tom H-06.wav"],
+"lt": ["lt/Tom L-01.wav","lt/Tom L-02.wav","lt/Tom L-03.wav","lt/Tom L-04.wav","lt/Tom L-05.wav","lt/Tom L-06.wav"],
+"misc": ["misc/Metal-01.wav","misc/Metal-02.wav","misc/Metal-03.wav","misc/Scratch.wav","misc/Shot-01.wav","misc/Shot-02.wav","misc/Shot-03.wav"],
+"mt": ["mt/Tom M-01.wav","mt/Tom M-02.wav","mt/Tom M-03.wav","mt/Tom M-05.wav"],
+"oh": ["oh/Hhopen1.wav"],
+"perc": ["perc/Blow1.wav"],
+"rd": ["rd/Ride.wav"],
+"rim": ["rim/zRim Shot-01.wav","rim/zRim Shot-02.wav"],
+"sd": ["sd/Snaredrum-01.wav","sd/Snaredrum-02.wav","sd/Snaredrum-03.wav","sd/Snaredrum-04.wav","sd/Snaredrum-05.wav","sd/Snaredrum-06.wav","sd/Snaredrum-07.wav","sd/Snaredrum-08.wav","sd/Snaredrum-09.wav","sd/Snaredrum-10.wav","sd/Snaredrum-11.wav","sd/Snaredrum-12.wav","sd/Snaredrum-13.wav","sd/Snaredrum-14.wav","sd/Snaredrum-15.wav","sd/Snaredrum-16.wav","sd/Snaredrum-17.wav","sd/Snaredrum-18.wav","sd/Snaredrum-19.wav","sd/Snaredrum-20.wav","sd/Snaredrum-21.wav"]
+} 

website/public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "Strudel REPL",
+  "name": "Strudel REPL - Tidal Patterns in JavaScript",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

website/public/piano.json

@@ -0,0 +1,33 @@
+{
+  "piano": {
+    "A0": "A0v8.mp3",
+    "C1": "C1v8.mp3",
+    "Ds1": "Ds1v8.mp3",
+    "Fs1": "Fs1v8.mp3",
+    "A1": "A1v8.mp3",
+    "C2": "C2v8.mp3",
+    "Ds2": "Ds2v8.mp3",
+    "Fs2": "Fs2v8.mp3",
+    "A2": "A2v8.mp3",
+    "C3": "C3v8.mp3",
+    "Ds3": "Ds3v8.mp3",
+    "Fs3": "Fs3v8.mp3",
+    "A3": "A3v8.mp3",
+    "C4": "C4v8.mp3",
+    "Ds4": "Ds4v8.mp3",
+    "Fs4": "Fs4v8.mp3",
+    "A4": "A4v8.mp3",
+    "C5": "C5v8.mp3",
+    "Fs5": "Fs5v8.mp3",
+    "A5": "A5v8.mp3",
+    "C6": "C6v8.mp3",
+    "Ds6": "Ds6v8.mp3",
+    "Fs6": "Fs6v8.mp3",
+    "A6": "A6v8.mp3",
+    "C7": "C7v8.mp3",
+    "Ds7": "Ds7v8.mp3",
+    "Fs7": "Fs7v8.mp3",
+    "A7": "A7v8.mp3",
+    "C8": "C8v8.mp3"
+  }
+}