Rewrite part of evaluation logic, run prettier

2023-11-26 01:49:34 +01:00
parent 22b52456fc
commit eb8ef879e7
56 changed files with 2037 additions and 2568 deletions
--- a/src/API.ts
+++ b/src/API.ts
@ -41,16 +41,28 @@ interface ControlChange {
 export async function loadSamples() {
  return Promise.all([
    initAudioOnFirstClick(),
-    samples("github:tidalcycles/Dirt-Samples/master", undefined, { tag: "Tidal" }).then(() =>
-      registerSynthSounds()
-    ),
+    samples("github:tidalcycles/Dirt-Samples/master", undefined, {
+      tag: "Tidal",
+    }).then(() => registerSynthSounds()),
    registerZZFXSounds(),
-    samples(drums, "github:ritchse/tidal-drum-machines/main/machines/", { tag: "Machines" }),
-    samples("github:Bubobubobubobubo/Dough-Fox/main", undefined, { tag: "FoxDot" }),
-    samples("github:Bubobubobubobubo/Dough-Samples/main", undefined, { tag: "Pack" }),
-    samples("github:Bubobubobubobubo/Dough-Amiga/main", undefined, { tag: "Amiga" }),
-    samples("github:Bubobubobubobubo/Dough-Amen/main", undefined, { tag: "Amen" }),
-    samples("github:Bubobubobubobubo/Dough-Waveforms/main", undefined, { tag: "Waveforms" }),
+    samples(drums, "github:ritchse/tidal-drum-machines/main/machines/", {
+      tag: "Machines",
+    }),
+    samples("github:Bubobubobubobubo/Dough-Fox/main", undefined, {
+      tag: "FoxDot",
+    }),
+    samples("github:Bubobubobubobubo/Dough-Samples/main", undefined, {
+      tag: "Pack",
+    }),
+    samples("github:Bubobubobubobubo/Dough-Amiga/main", undefined, {
+      tag: "Amiga",
+    }),
+    samples("github:Bubobubobubobubo/Dough-Amen/main", undefined, {
+      tag: "Amen",
+    }),
+    samples("github:Bubobubobubobubo/Dough-Waveforms/main", undefined, {
+      tag: "Waveforms",
+    }),
  ]);
 }

@ -1901,10 +1913,13 @@ export class UserAPI {
  // =============================================================

  register = (name: string, operation: EventOperation<AbstractEvent>): void => {
-    AbstractEvent.prototype[name] = function(this: AbstractEvent, ...args: any[]) {
+    AbstractEvent.prototype[name] = function (
+      this: AbstractEvent,
+      ...args: any[]
+    ) {
      return operation(this, ...args);
    };
-  }
+  };

  public shuffle = <T>(array: T[]): T[] => {
    /**
--- a/src/AudioVisualisation.ts
+++ b/src/AudioVisualisation.ts
@ -14,7 +14,7 @@ export const drawCircle = (
  x: number,
  y: number,
  radius: number,
-  color: string
+  color: string,
 ): void => {
  // @ts-ignore
  const canvas: HTMLCanvasElement = app.interface.feedback;
@ -36,7 +36,7 @@ export const drawCircle = (
 export const blinkScript = (
  app: Editor,
  script: "local" | "global" | "init",
-  no?: number
+  no?: number,
 ) => {
  if (no !== undefined && no < 1 && no > 9) return;
  const blinkDuration =
@ -55,7 +55,7 @@ export const blinkScript = (
      horizontalOffset + shift,
      app.interface.feedback.clientHeight - 15,
      8,
-      "#fdba74"
+      "#fdba74",
    );
  };

@ -91,7 +91,7 @@ export const blinkScript = (
          0,
          0,
          (app.interface.feedback as HTMLCanvasElement).width,
-          (app.interface.feedback as HTMLCanvasElement).height
+          (app.interface.feedback as HTMLCanvasElement).height,
        );
    }, blinkDuration);
  }
@ -141,7 +141,7 @@ let lastRenderTime: number = 0;
 */
 export const runOscilloscope = (
  canvas: HTMLCanvasElement,
-  app: Editor
+  app: Editor,
 ): void => {
  let config = app.osc;
  let analyzer = getAnalyser(config.fftSize);
@ -155,7 +155,7 @@ export const runOscilloscope = (
    width: number,
    height: number,
    offset_height: number,
-    offset_width: number
+    offset_width: number,
  ) {
    const maxFPS = 30;
    const now = performance.now();
@ -169,10 +169,12 @@ export const runOscilloscope = (
    canvasCtx.clearRect(0, 0, width, height);

    const performanceFactor = 1;
-    const reducedDataSize = Math.floor(freqDataArray.length * performanceFactor);
+    const reducedDataSize = Math.floor(
+      freqDataArray.length * performanceFactor,
+    );
    const numBars = Math.min(
      reducedDataSize,
-      app.osc.orientation === "horizontal" ? width : height
+      app.osc.orientation === "horizontal" ? width : height,
    );
    const barWidth =
      app.osc.orientation === "horizontal" ? width / numBars : height / numBars;
@ -184,7 +186,8 @@ export const runOscilloscope = (

    for (let i = 0; i < numBars; i++) {
      barHeight = Math.floor(
-        freqDataArray[Math.floor(i * freqDataArray.length / numBars)] * ((height / 256) * app.osc.size)
+        freqDataArray[Math.floor((i * freqDataArray.length) / numBars)] *
+          ((height / 256) * app.osc.size),
      );

      if (app.osc.orientation === "horizontal") {
@ -192,7 +195,7 @@ export const runOscilloscope = (
          x + offset_width,
          (height - barHeight) / 2 + offset_height,
          barWidth + 1,
-          barHeight
+          barHeight,
        );
        x += barWidth;
      } else {
@ -200,14 +203,13 @@ export const runOscilloscope = (
          (width - barHeight) / 2 + offset_width,
          y + offset_height,
          barHeight,
-          barWidth + 1
+          barWidth + 1,
        );
        y += barWidth;
      }
    }
  }

-
  function draw() {
    // Update the canvas position on each cycle
    const WIDTH = canvas.width;
@ -230,7 +232,7 @@ export const runOscilloscope = (
        -OFFSET_WIDTH,
        -OFFSET_HEIGHT,
        WIDTH + 2 * OFFSET_WIDTH,
-        HEIGHT + 2 * OFFSET_HEIGHT
+        HEIGHT + 2 * OFFSET_HEIGHT,
      );
      return;
    }
@ -250,7 +252,7 @@ export const runOscilloscope = (
        -OFFSET_WIDTH,
        -OFFSET_HEIGHT,
        WIDTH + 2 * OFFSET_WIDTH,
-        HEIGHT + 2 * OFFSET_HEIGHT
+        HEIGHT + 2 * OFFSET_HEIGHT,
      );
    }
    canvasCtx.lineWidth = app.osc.thickness;
--- a/src/Clock.ts
+++ b/src/Clock.ts
@ -48,7 +48,10 @@ export class Clock {
  lastPlayPressTime: number;
  totalPauseTime: number;

-  constructor(public app: Editor, ctx: AudioContext) {
+  constructor(
+    public app: Editor,
+    ctx: AudioContext,
+  ) {
    this.time_position = { bar: 0, beat: 0, pulse: 0 };
    this.time_signature = [4, 4];
    this.logicalTime = 0;
--- a/src/Documentation.ts
+++ b/src/Documentation.ts
@ -47,7 +47,7 @@ export const makeExampleFactory = (application: Editor): Function => {
  const make_example = (
    description: string,
    code: string,
-    open: boolean = false
+    open: boolean = false,
  ) => {
    const codeId = `codeExample${application.exampleCounter++}`;
    // Store the code snippet in the data structure
@ -143,7 +143,7 @@ export const updateDocumentationContent = (app: Editor, bindings: any) => {
    extensions: [showdownHighlight({ auto_detection: true }), ...bindings],
  });
  const converted_markdown = converter.makeHtml(
-    app.docs[app.currentDocumentationPane]
+    app.docs[app.currentDocumentationPane],
  );
  document.getElementById("documentation-content")!.innerHTML =
    converted_markdown;
--- a/src/DomElements.ts
+++ b/src/DomElements.ts
@ -1,6 +1,5 @@
 import { type Editor } from "./main";

-
 export type ElementMap = {
  [key: string]:
    | HTMLElement
@ -10,8 +9,7 @@ export type ElementMap = {
    | HTMLSelectElement
    | HTMLCanvasElement
    | HTMLFormElement
-  | HTMLInputElement
-  ;
+    | HTMLInputElement;
 };

 export const singleElements = {
@ -92,6 +90,4 @@ export const createDocumentationStyle = (app: Editor) => {
    tr: "",
    box: "border bg-red-500",
  };
-}
-
-
+};
--- a/src/EditorSetup.ts
+++ b/src/EditorSetup.ts
@ -20,7 +20,7 @@ import {
  bracketMatching,
 } from "@codemirror/language";
 import { defaultKeymap, historyKeymap, history } from "@codemirror/commands";
-import { searchKeymap, highlightSelectionMatches } from "@codemirror/search"
+import { searchKeymap, highlightSelectionMatches } from "@codemirror/search";
 import {
  autocompletion,
  closeBrackets,
@ -34,15 +34,15 @@ import { toposTheme } from "./themes/toposTheme";
 import { javascript } from "@codemirror/lang-javascript";
 import { inlineHoveringTips } from "./documentation/inlineHelp";
 import { toposCompletions, soundCompletions } from "./documentation/inlineHelp";
-import { javascriptLanguage } from "@codemirror/lang-javascript"
+import { javascriptLanguage } from "@codemirror/lang-javascript";

 export const jsCompletions = javascriptLanguage.data.of({
-  autocomplete: toposCompletions
-})
+  autocomplete: toposCompletions,
+});

 export const toposSoundCompletions = javascriptLanguage.data.of({
-  autocomplete: soundCompletions
-})
+  autocomplete: soundCompletions,
+});

 export const editorSetup: Extension = (() => [
  highlightActiveLineGutter(),
@ -95,7 +95,9 @@ export const installEditor = (app: Editor) => {
    app.withLineNumbers.of(lines),
    app.fontSize.of(fontModif),
    app.hoveringCompartment.of(app.settings.tips ? inlineHoveringTips : []),
-    app.completionsCompartment.of(app.settings.completions ? [jsCompletions, toposSoundCompletions] : []),
+    app.completionsCompartment.of(
+      app.settings.completions ? [jsCompletions, toposSoundCompletions] : [],
+    ),
    editorSetup,
    toposTheme,
    app.chosenLanguage.of(javascript()),
@ -114,7 +116,7 @@ export const installEditor = (app: Editor) => {
              return true;
            },
          },
-        ])
+        ]),
      ),
      keymap.of([indentWithTab]),
    ],
@ -139,7 +141,7 @@ export const installEditor = (app: Editor) => {
        ".cm-gutters": {
          fontSize: `${app.settings.font_size}px`,
        },
-      })
+      }),
    ),
  });
 };
--- a/src/Evaluator.ts
+++ b/src/Evaluator.ts
@ -1,72 +1,61 @@
 import type { Editor } from "./main";
 import type { File } from "./FileManagement";

-const delay = (ms: number) =>
-  new Promise((_, reject) =>
-    setTimeout(() => reject(new Error("Operation took too long")), ms)
-  );
-
+const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 const codeReplace = (code: string): string => {
-  let new_code = code.replace(/->/g, "&&").replace(/::/g, "&&");
-  return new_code;
+  return code.replace(/->|::/g, "&&");
 };

-const tryCatchWrapper = (
+const tryCatchWrapper = async (
  application: Editor,
-  code: string
+  code: string,
 ): Promise<boolean> => {
-  return new Promise((resolve, _) => {
  try {
-      Function(
-        `"use strict";try{
-          ${codeReplace(code)}; /* break block comments */;
-      } catch (e) {console.log(e); _reportError(e);};`
-      ).call(application.api);
-      resolve(true);
+    await new Function(`"use strict"; ${codeReplace(code)}`).call(
+      application.api,
+    );
+    return true;
  } catch (error) {
    application.interface.error_line.innerHTML = error as string;
-      application.api._reportError(error as string)
-      resolve(false);
+    application.api._reportError(error as string);
+    return false;
  }
-  });
 };

 const cache = new Map<string, Function>();
-const MAX_CACHE_SIZE = 20;
+const MAX_CACHE_SIZE = 40;

 const addFunctionToCache = (code: string, fn: Function) => {
  if (cache.size >= MAX_CACHE_SIZE) {
-    // Delete the first item if cache size exceeds max size
    cache.delete(cache.keys().next().value);
  }
  cache.set(code, fn);
 };

+// Optimized evaluate function with reduced complexity
 export const tryEvaluate = async (
  application: Editor,
  code: File,
-  timeout = 5000
+  timeout = 5000,
 ): Promise<void> => {
-  try {
  code.evaluations!++;
  const candidateCode = code.candidate;

-    if (cache.has(candidateCode)) {
-      // If the code is already in cache, use it
-      cache.get(candidateCode)!.call(application.api);
+  try {
+    const cachedFunction = cache.get(candidateCode);
+    if (cachedFunction) {
+      cachedFunction.call(application.api);
    } else {
-      const wrappedCode = `let i = ${code.evaluations};` + candidateCode;
-      // Otherwise, evaluate the code and if valid, add it to the cache
+      const wrappedCode = `let i = ${code.evaluations}; ${candidateCode}`;
      const isCodeValid = await Promise.race([
-        tryCatchWrapper(application, wrappedCode as string),
+        tryCatchWrapper(application, wrappedCode),
        delay(timeout),
      ]);
+
      if (isCodeValid) {
        code.committed = code.candidate;
        const newFunction = new Function(
-          `"use strict";try{${codeReplace(
-            wrappedCode
-          )}} catch (e) {console.log(e); _reportError(e);};`
+          `"use strict"; ${codeReplace(wrappedCode)}`,
        );
        addFunctionToCache(candidateCode, newFunction);
      } else {
@ -75,14 +64,14 @@ export const tryEvaluate = async (
    }
  } catch (error) {
    application.interface.error_line.innerHTML = error as string;
-    application.api._reportError(error as string)
+    application.api._reportError(error as string);
  }
 };

 export const evaluate = async (
  application: Editor,
  code: File,
-  timeout = 1000
+  timeout = 1000,
 ): Promise<void> => {
  try {
    await Promise.race([
@ -98,7 +87,7 @@ export const evaluate = async (

 export const evaluateOnce = async (
  application: Editor,
-  code: string
+  code: string,
 ): Promise<void> => {
  /**
   * Evaluates the code once without any caching or error-handling mechanisms besides the tryCatchWrapper.
--- a/src/FileManagement.ts
+++ b/src/FileManagement.ts
@ -154,7 +154,7 @@ export class AppSettings {

  constructor() {
    const settingsFromStorage = JSON.parse(
-      localStorage.getItem("topos") || "{}"
+      localStorage.getItem("topos") || "{}",
    );

    if (settingsFromStorage && Object.keys(settingsFromStorage).length !== 0) {
@ -210,7 +210,7 @@ export class AppSettings {

  saveApplicationToLocalStorage(
    universes: Universes,
-    settings: Settings
+    settings: Settings,
  ): void {
    /**
     * Main method to store the application to local storage.
@ -263,7 +263,9 @@ export const initializeSelectedUniverse = (app: Editor): void => {
      app.universes[app.selected_universe] = structuredClone(template_universe);
    }
  }
-  (app.interface.universe_viewer as HTMLInputElement).placeholder! = `${app.selected_universe}`;
+  (
+    app.interface.universe_viewer as HTMLInputElement
+  ).placeholder! = `${app.selected_universe}`;
 };

 export const emptyUrl = () => {
@ -321,7 +323,7 @@ export const loadUniverserFromUrl = (app: Editor): void => {
 export const loadUniverse = (
  app: Editor,
  universeName: string,
-  universe: Universe = template_universe
+  universe: Universe = template_universe,
 ): void => {
  let selectedUniverse = universeName.trim();
  if (app.universes[selectedUniverse] === undefined) {
@ -334,7 +336,9 @@ export const loadUniverse = (
  // Updating references to the currently selected universe
  app.settings.selected_universe = selectedUniverse;
  app.selected_universe = selectedUniverse;
-  (app.interface.universe_viewer as HTMLInputElement).placeholder! = `${selectedUniverse}`;
+  (
+    app.interface.universe_viewer as HTMLInputElement
+  ).placeholder! = `${selectedUniverse}`;
  // Updating the editor View to reflect the selected universe
  app.updateEditorView();
  // Evaluating the initialisation script for the selected universe
--- a/src/IO/MidiConnection.ts
+++ b/src/IO/MidiConnection.ts
@ -175,10 +175,10 @@ export class MidiConnection {
     */
    if (this.midiInputs.length > 0) {
      const midiClockSelect = document.getElementById(
-        "midi-clock-input"
+        "midi-clock-input",
      ) as HTMLSelectElement;
      const midiInputSelect = document.getElementById(
-        "default-midi-input"
+        "default-midi-input",
      ) as HTMLSelectElement;

      midiClockSelect.innerHTML = "";
@ -207,7 +207,7 @@ export class MidiConnection {

      if (this.settings.midi_clock_input) {
        const clockMidiInputIndex = this.getMidiInputIndex(
-          this.settings.midi_clock_input
+          this.settings.midi_clock_input,
        );
        midiClockSelect.value = clockMidiInputIndex.toString();
        if (clockMidiInputIndex > 0) {
@ -220,7 +220,7 @@ export class MidiConnection {

      if (this.settings.default_midi_input) {
        const defaultMidiInputIndex = this.getMidiInputIndex(
-          this.settings.default_midi_input
+          this.settings.default_midi_input,
        );
        midiInputSelect.value = defaultMidiInputIndex.toString();
        if (defaultMidiInputIndex > 0) {
@ -400,14 +400,14 @@ export class MidiConnection {

  public removeFromActiveNotes(note: number, channel: number): void {
    const index = this.activeNotes.findIndex(
-      (e) => e.note === note && e.channel === channel
+      (e) => e.note === note && e.channel === channel,
    );
    if (index >= 0) this.activeNotes.splice(index, 1);
  }

  public removeFromStickyNotes(note: number, channel: number): boolean {
    const index = this.stickyNotes.findIndex(
-      (e) => e.note === note && e.channel === channel
+      (e) => e.note === note && e.channel === channel,
    );
    if (index >= 0) {
      this.stickyNotes.splice(index, 1);
@ -578,8 +578,9 @@ export class MidiConnection {
    if (typeof output === "number") {
      if (output < 0 || output >= this.midiOutputs.length) {
        console.error(
-          `Invalid MIDI output index. Index must be in the range 0-${this.midiOutputs.length - 1
-          }.`
+          `Invalid MIDI output index. Index must be in the range 0-${
+            this.midiOutputs.length - 1
+          }.`,
        );
        return this.currentOutputIndex;
      } else {
@ -607,8 +608,9 @@ export class MidiConnection {
    if (typeof input === "number") {
      if (input < 0 || input >= this.midiInputs.length) {
        console.error(
-          `Invalid MIDI input index. Index must be in the range 0-${this.midiInputs.length - 1
-          }.`
+          `Invalid MIDI input index. Index must be in the range 0-${
+            this.midiInputs.length - 1
+          }.`,
        );
        return -1;
      } else {
@ -642,7 +644,7 @@ export class MidiConnection {
    velocity: number,
    duration: number,
    port: number | string = this.currentOutputIndex,
-    bend: number | undefined = undefined
+    bend: number | undefined = undefined,
  ): void {
    /**
     * Sending a MIDI Note on/off message with the same note number and channel. Automatically manages
@ -668,11 +670,14 @@ export class MidiConnection {
      if (bend) this.sendPitchBend(bend, channel, port);

      // Schedule Note Off
-      const timeoutId = setTimeout(() => {
+      const timeoutId = setTimeout(
+        () => {
          output.send(noteOffMessage);
          if (bend) this.sendPitchBend(8192, channel, port);
          delete this.scheduledNotes[noteNumber];
-      }, (duration - 0.02) * 1000);
+        },
+        (duration - 0.02) * 1000,
+      );

      // @ts-ignore
      this.scheduledNotes[noteNumber] = timeoutId;
@ -685,7 +690,7 @@ export class MidiConnection {
    note: number,
    channel: number,
    velocity: number,
-    port: number | string = this.currentOutputIndex
+    port: number | string = this.currentOutputIndex,
  ) {
    /**
     * Sending Midi Note on message
@ -704,7 +709,7 @@ export class MidiConnection {
  sendMidiOff(
    note: number,
    channel: number,
-    port: number | string = this.currentOutputIndex
+    port: number | string = this.currentOutputIndex,
  ) {
    /**
     * Sending Midi Note off message
@ -722,7 +727,7 @@ export class MidiConnection {

  sendAllNotesOff(
    channel: number,
-    port: number | string = this.currentOutputIndex
+    port: number | string = this.currentOutputIndex,
  ) {
    /**
     * Sending Midi Note off message
@ -739,7 +744,7 @@ export class MidiConnection {

  sendAllSoundOff(
    channel: number,
-    port: number | string = this.currentOutputIndex
+    port: number | string = this.currentOutputIndex,
  ) {
    /**
     * Sending all sound off
@ -775,7 +780,7 @@ export class MidiConnection {
  public sendPitchBend(
    value: number,
    channel: number,
-    port: number | string = this.currentOutputIndex
+    port: number | string = this.currentOutputIndex,
  ): void {
    /**
     * Sends a MIDI Pitch Bend message to the currently selected MIDI output.
@ -786,7 +791,7 @@ export class MidiConnection {
     */
    if (value < 0 || value > 16383) {
      console.error(
-        "Invalid pitch bend value. Value must be in the range 0-16383."
+        "Invalid pitch bend value. Value must be in the range 0-16383.",
      );
    }
    if (channel < 0 || channel > 15) {
@ -825,7 +830,7 @@ export class MidiConnection {
  public sendMidiControlChange(
    controlNumber: number,
    value: number,
-    channel: number
+    channel: number,
  ): void {
    /**
     * Sends a MIDI Control Change message to the currently selected MIDI output.
--- a/src/InterfaceLogic.ts
+++ b/src/InterfaceLogic.ts
@ -118,32 +118,40 @@ export const installInterfaceLogic = (app: Editor) => {

  app.interface.universe_viewer.addEventListener("keydown", (event: any) => {
    if (event.key === "Enter") {
-      let content = (app.interface.universe_viewer as HTMLInputElement).value.trim();
+      let content = (
+        app.interface.universe_viewer as HTMLInputElement
+      ).value.trim();
      if (content.length > 2 && content.length < 40) {
        if (content !== app.selected_universe) {
-          Object.defineProperty(app.universes, content,
+          Object.defineProperty(
+            app.universes,
+            content,
            // @ts-ignore
-            Object.getOwnPropertyDescriptor(app.universes, app.selected_universe));
+            Object.getOwnPropertyDescriptor(
+              app.universes,
+              app.selected_universe,
+            ),
+          );
          delete app.universes[app.selected_universe];
        }
        app.selected_universe = content;
        loadUniverse(app, app.selected_universe);
-        (app.interface.universe_viewer as HTMLInputElement).placeholder = content;
-        (app.interface.universe_viewer as HTMLInputElement).value = '';
+        (app.interface.universe_viewer as HTMLInputElement).placeholder =
+          content;
+        (app.interface.universe_viewer as HTMLInputElement).value = "";
      }
    }
  });

-
  app.interface.audio_nudge_range.addEventListener("input", () => {
    app.clock.nudge = parseInt(
-      (app.interface.audio_nudge_range as HTMLInputElement).value
+      (app.interface.audio_nudge_range as HTMLInputElement).value,
    );
  });

  app.interface.dough_nudge_range.addEventListener("input", () => {
    app.dough_nudge = parseInt(
-      (app.interface.dough_nudge_range as HTMLInputElement).value
+      (app.interface.dough_nudge_range as HTMLInputElement).value,
    );
  });

@ -227,16 +235,16 @@ export const installInterfaceLogic = (app: Editor) => {
  });

  app.interface.local_button.addEventListener("click", () =>
-    app.changeModeFromInterface("local")
+    app.changeModeFromInterface("local"),
  );
  app.interface.global_button.addEventListener("click", () =>
-    app.changeModeFromInterface("global")
+    app.changeModeFromInterface("global"),
  );
  app.interface.init_button.addEventListener("click", () =>
-    app.changeModeFromInterface("init")
+    app.changeModeFromInterface("init"),
  );
  app.interface.note_button.addEventListener("click", () =>
-    app.changeModeFromInterface("notes")
+    app.changeModeFromInterface("notes"),
  );

  app.interface.font_family_selector.addEventListener("change", () => {
@ -255,7 +263,7 @@ export const installInterfaceLogic = (app: Editor) => {
            fontSize: app.settings.font_size + "px",
          },
          ".cm-gutters": { fontSize: app.settings.font_size + "px" },
-        })
+        }),
      ),
    });
  });
@ -275,7 +283,7 @@ export const installInterfaceLogic = (app: Editor) => {
            fontSize: app.settings.font_size + "px",
          },
          ".cm-gutters": { fontSize: app.settings.font_size + "px" },
-        })
+        }),
      ),
    });
  });
@ -283,7 +291,7 @@ export const installInterfaceLogic = (app: Editor) => {
  app.interface.settings_button.addEventListener("click", () => {
    // Populate the font selector
    const fontFamilySelect = document.getElementById(
-      "font-family"
+      "font-family",
    ) as HTMLSelectElement | null;
    if (fontFamilySelect) {
      fontFamilySelect.value = app.settings.font;
@ -294,7 +302,7 @@ export const installInterfaceLogic = (app: Editor) => {
    doughNudgeRange.value = app.dough_nudge.toString();
    // @ts-ignore
    const doughNumber = document.getElementById(
-      "doughnumber"
+      "doughnumber",
    ) as HTMLInputElement;
    doughNumber.value = app.dough_nudge.toString();
    if (app.settings.font_size === null) {
@ -350,7 +358,7 @@ export const installInterfaceLogic = (app: Editor) => {
            fontSize: app.settings.font_size + "px",
          },
          ".cm-gutters": { fontSize: app.settings.font_size + "px" },
-        })
+        }),
      ),
    });
  });
@ -408,7 +416,7 @@ export const installInterfaceLogic = (app: Editor) => {
    app.settings.tips = checked;
    app.view.dispatch({
      effects: app.hoveringCompartment.reconfigure(
-        checked ? inlineHoveringTips : []
+        checked ? inlineHoveringTips : [],
      ),
    });
  });
@ -421,7 +429,7 @@ export const installInterfaceLogic = (app: Editor) => {
    app.settings.completions = checked;
    app.view.dispatch({
      effects: app.completionsCompartment.reconfigure(
-        checked ? jsCompletions : []
+        checked ? jsCompletions : [],
      ),
    });
  });
@ -444,7 +452,7 @@ export const installInterfaceLogic = (app: Editor) => {

  app.interface.midi_clock_ppqn.addEventListener("change", () => {
    let value = parseInt(
-      (app.interface.midi_clock_ppqn as HTMLInputElement).value
+      (app.interface.midi_clock_ppqn as HTMLInputElement).value,
    );
    app.settings.midi_clock_ppqn = value;
  });
--- a/src/TransportNode.js
+++ b/src/TransportNode.js
@ -19,11 +19,12 @@ export class TransportNode extends AudioWorkletNode {
            this.app.api.MidiConnection.sendMidiClock();
          }
          const futureTimeStamp = this.app.clock.convertTicksToTimeposition(
-            this.app.clock.tick
+            this.app.clock.tick,
          );
          this.app.clock.time_position = futureTimeStamp;
          if (futureTimeStamp.pulse % this.app.clock.ppqn == 0) {
-            this.timeviewer.innerHTML = `${zeroPad(futureTimeStamp.bar, 2)}:${futureTimeStamp.beat + 1
+            this.timeviewer.innerHTML = `${zeroPad(futureTimeStamp.bar, 2)}:${
+              futureTimeStamp.beat + 1
            } / ${this.app.clock.bpm}`;
          }
          if (this.app.exampleIsPlaying) {
--- a/src/Utils/Generic.ts
+++ b/src/Utils/Generic.ts
@ -8,7 +8,7 @@
 */
 export function objectWithArraysToArrayOfObjects(
  input: Record<string, any>,
-  arraysToArrays: string[]
+  arraysToArrays: string[],
 ): Record<string, any>[] {
  const inputCopy = { ...input };
  arraysToArrays.forEach((k) => {
@ -24,7 +24,7 @@ export function objectWithArraysToArrayOfObjects(
      acc.keys.push(key);
      return acc;
    },
-    { keys: [] as string[], maxLength: 0 }
+    { keys: [] as string[], maxLength: 0 },
  );

  const output: Record<string, any>[] = [];
@ -52,9 +52,10 @@ export function objectWithArraysToArrayOfObjects(
 */
 export function arrayOfObjectsToObjectWithArrays<T extends Record<string, any>>(
  array: T[],
-  mergeObject: Record<string, any> = {}
+  mergeObject: Record<string, any> = {},
 ): Record<string, any> {
-  return array.reduce((acc, obj) => {
+  return array.reduce(
+    (acc, obj) => {
      const mergedObj = { ...obj, ...mergeObject };
      Object.keys(mergedObj).forEach((key) => {
        if (!acc[key]) {
@ -63,7 +64,9 @@ export function arrayOfObjectsToObjectWithArrays<T extends Record<string, any>>(
        acc[key].push(mergedObj[key]);
      });
      return acc;
-  }, {} as Record<string, any>);
+    },
+    {} as Record<string, any>,
+  );
 }

 /*
@ -76,9 +79,9 @@ export function arrayOfObjectsToObjectWithArrays<T extends Record<string, any>>(
 */
 export function filterObject(
  obj: Record<string, any>,
-  filter: string[]
+  filter: string[],
 ): Record<string, any> {
  return Object.fromEntries(
-    Object.entries(obj).filter(([key]) => filter.includes(key))
+    Object.entries(obj).filter(([key]) => filter.includes(key)),
  );
 }
--- a/src/WindowBehavior.ts
+++ b/src/WindowBehavior.ts
@ -8,8 +8,8 @@ const handleResize = (canvas: HTMLCanvasElement) => {
  const dpr = window.devicePixelRatio || 1;

  // Assuming the canvas takes up the whole window
-  canvas.width = window.innerWidth * dpr * 0.25;
-  canvas.height = window.innerHeight * dpr * 0.25;
+  canvas.width = window.innerWidth * dpr;
+  canvas.height = window.innerHeight * dpr;

  if (ctx) {
    ctx.scale(dpr, dpr);
@ -32,13 +32,13 @@ export const saveBeforeExit = (app: Editor): null => {
 export const installWindowBehaviors = (
  app: Editor,
  window: Window,
-  preventMultipleTabs: boolean = false
+  preventMultipleTabs: boolean = false,
 ) => {
  window.addEventListener("resize", () =>
-    handleResize(app.interface.scope as HTMLCanvasElement)
+    handleResize(app.interface.scope as HTMLCanvasElement),
  );
  window.addEventListener("resize", () =>
-    handleResize(app.interface.feedback as HTMLCanvasElement)
+    handleResize(app.interface.feedback as HTMLCanvasElement),
  );
  window.addEventListener("beforeunload", (event) => {
    event.preventDefault();
@ -61,11 +61,11 @@ export const installWindowBehaviors = (
        if (e.key == "page_available") {
          document.getElementById("all")!.classList.add("invisible");
          alert(
-            "Topos is already opened in another tab. Close this tab now to prevent data loss."
+            "Topos is already opened in another tab. Close this tab now to prevent data loss.",
          );
        }
      },
-      false
+      false,
    );
  }
 };
--- a/src/classes/AbstractEvents.ts
+++ b/src/classes/AbstractEvents.ts
@ -1,14 +1,10 @@
 import { type Editor } from "../main";
-import {
-  freqToMidi,
-  resolvePitchBend,
-  safeScale
-} from "zifferjs";
+import { freqToMidi, resolvePitchBend, safeScale } from "zifferjs";

 export type EventOperation<T> = (instance: T, ...args: any[]) => void;

 export interface AbstractEvent {
-  [key: string]: any
+  [key: string]: any;
 }

 export class AbstractEvent {
@ -208,19 +204,26 @@ export class AbstractEvent {
    return this.modify(func);
  };

-  noteLength = (value: number | number[], ...kwargs: number[]): AbstractEvent => {
+  noteLength = (
+    value: number | number[],
+    ...kwargs: number[]
+  ): AbstractEvent => {
    /**
     * This function is used to set the note length of the Event.
     */
    if (kwargs.length > 0) {
-      value = (Array.isArray(value) ? value.concat(kwargs) : [value, ...kwargs]);
+      value = Array.isArray(value) ? value.concat(kwargs) : [value, ...kwargs];
    }
    if (Array.isArray(value)) {
      this.values["noteLength"] = value;
-      this.values.dur = value.map((v) => this.app.clock.convertPulseToSecond(v*4*this.app.clock.ppqn));
+      this.values.dur = value.map((v) =>
+        this.app.clock.convertPulseToSecond(v * 4 * this.app.clock.ppqn),
+      );
    } else {
      this.values["noteLength"] = value;
-      this.values.dur = this.app.clock.convertPulseToSecond(value*4*this.app.clock.ppqn);
+      this.values.dur = this.app.clock.convertPulseToSecond(
+        value * 4 * this.app.clock.ppqn,
+      );
    }
    return this;
  };
@ -238,12 +241,12 @@ export abstract class AudibleEvent extends AbstractEvent {
     * @returns The Event
     */
    if (kwargs.length > 0) {
-      value = (Array.isArray(value) ? value.concat(kwargs) : [value, ...kwargs]);
+      value = Array.isArray(value) ? value.concat(kwargs) : [value, ...kwargs];
    }
    this.values["pitch"] = value;
    if (this.values.key && this.values.parsedScale) this.update();
    return this;
-  }
+  };

  pc = this.pitch;

@ -254,10 +257,15 @@ export abstract class AudibleEvent extends AbstractEvent {
     * @returns The Event
     */
    if (kwargs.length > 0) {
-      value = (Array.isArray(value) ? value.concat(kwargs) : [value, ...kwargs]);
+      value = Array.isArray(value) ? value.concat(kwargs) : [value, ...kwargs];
    }
    this.values["octave"] = value;
-    if(this.values.key && (this.values.pitch || this.values.pitch === 0) && this.values.parsedScale) this.update();
+    if (
+      this.values.key &&
+      (this.values.pitch || this.values.pitch === 0) &&
+      this.values.parsedScale
+    )
+      this.update();
    return this;
  };

@ -268,21 +276,28 @@ export abstract class AudibleEvent extends AbstractEvent {
     * @returns The Event
     */
    if (kwargs.length > 0) {
-      value = (Array.isArray(value) ? value.concat(kwargs) : [value, ...kwargs]);
+      value = Array.isArray(value) ? value.concat(kwargs) : [value, ...kwargs];
    }
    this.values["key"] = value;
-    if((this.values.pitch || this.values.pitch === 0) && this.values.parsedScale) this.update();
+    if (
+      (this.values.pitch || this.values.pitch === 0) &&
+      this.values.parsedScale
+    )
+      this.update();
    return this;
  };

-  scale = (value: string | number | (number|string)[], ...kwargs: (string|number)[]): this => {
+  scale = (
+    value: string | number | (number | string)[],
+    ...kwargs: (string | number)[]
+  ): this => {
    /*
     * This function is used to set the scale of the Event.
     * @param value - The scale value
     * @returns The Event
     */
    if (kwargs.length > 0) {
-      value = (Array.isArray(value) ? value.concat(kwargs) : [value, ...kwargs]);
+      value = Array.isArray(value) ? value.concat(kwargs) : [value, ...kwargs];
    }
    if (typeof value === "string" || typeof value === "number") {
      this.values.parsedScale = safeScale(value) as number[];
@ -302,7 +317,7 @@ export abstract class AudibleEvent extends AbstractEvent {
     * @returns The Event
     */
    if (kwargs.length > 0) {
-      value = (Array.isArray(value) ? value.concat(kwargs) : [value, ...kwargs]);
+      value = Array.isArray(value) ? value.concat(kwargs) : [value, ...kwargs];
    }
    this.values["freq"] = value;
    if (Array.isArray(value)) {
--- a/src/classes/MidiEvent.ts
+++ b/src/classes/MidiEvent.ts
@ -2,7 +2,11 @@ import { AudibleEvent } from "./AbstractEvents";
 import { type Editor } from "../main";
 import { MidiConnection } from "../IO/MidiConnection";
 import { noteFromPc, chord as parseChord } from "zifferjs";
-import { filterObject, arrayOfObjectsToObjectWithArrays, objectWithArraysToArrayOfObjects } from "../Utils/Generic";
+import {
+  filterObject,
+  arrayOfObjectsToObjectWithArrays,
+  objectWithArraysToArrayOfObjects,
+} from "../Utils/Generic";

 export type MidiParams = {
  note: number;
@ -11,12 +15,15 @@ export type MidiParams = {
  port?: number;
  sustain?: number;
  velocity?: number;
-}
+};

 export class MidiEvent extends AudibleEvent {
  midiConnection: MidiConnection;

-  constructor(input: MidiParams, public app: Editor) {
+  constructor(
+    input: MidiParams,
+    public app: Editor,
+  ) {
    super(app);
    this.values = input;
    this.midiConnection = app.api.MidiConnection;
@ -40,7 +47,7 @@ export class MidiEvent extends AudibleEvent {
  velocity = (value: number | number[]): this => {
    this.values["velocity"] = value;
    return this;
-  }
+  };

  channel = (value: number | number[]): this => {
    this.values["channel"] = value;
@ -51,7 +58,9 @@ export class MidiEvent extends AudibleEvent {
    if (typeof value === "string") {
      this.values["port"] = this.midiConnection.getMidiOutputIndex(value);
    } else if (Array.isArray(value)) {
-      this.values["port"] = value.map((v) => typeof v === "string" ? this.midiConnection.getMidiOutputIndex(v) : v);
+      this.values["port"] = value.map((v) =>
+        typeof v === "string" ? this.midiConnection.getMidiOutputIndex(v) : v,
+      );
    }
    return this;
  };
@ -86,16 +95,23 @@ export class MidiEvent extends AudibleEvent {

  update = (): void => {
    // Get key, pitch, parsedScale and octave from this.values object
-    const filteredValues = filterObject(this.values, ["key", "pitch", "parsedScale", "octave"]);
+    const filteredValues = filterObject(this.values, [
+      "key",
+      "pitch",
+      "parsedScale",
+      "octave",
+    ]);

-    const events = objectWithArraysToArrayOfObjects(filteredValues,["parsedScale"]);
+    const events = objectWithArraysToArrayOfObjects(filteredValues, [
+      "parsedScale",
+    ]);

    events.forEach((event) => {
      const [note, bend] = noteFromPc(
-        event.key as number || "C4",
-        event.pitch as number || 0,
-        event.parsedScale as number[] || event.scale || "MAJOR",
-        event.octave as number || 0
+        (event.key as number) || "C4",
+        (event.pitch as number) || 0,
+        (event.parsedScale as number[]) || event.scale || "MAJOR",
+        (event.octave as number) || 0,
      );
      event.note = note;
      if (bend) event.bend = bend;
@ -114,9 +130,7 @@ export class MidiEvent extends AudibleEvent {
      const note = params.note ? params.note : 60;

      const sustain = params.sustain
-        ? params.sustain *
-          event.app.clock.pulse_duration *
-          event.app.api.ppqn()
+        ? params.sustain * event.app.clock.pulse_duration * event.app.api.ppqn()
        : event.app.clock.pulse_duration * event.app.api.ppqn();

      const bend = params.bend ? params.bend : undefined;
@ -131,15 +145,16 @@ export class MidiEvent extends AudibleEvent {
        velocity,
        sustain,
        port,
-        bend
+        bend,
      );
    }

-    const events = objectWithArraysToArrayOfObjects(this.values,["parsedScale"]) as MidiParams[];
+    const events = objectWithArraysToArrayOfObjects(this.values, [
+      "parsedScale",
+    ]) as MidiParams[];

    events.forEach((p: MidiParams) => {
      play(this, p);
    });
-    
  };
 }
--- a/src/classes/RestEvent.ts
+++ b/src/classes/RestEvent.ts
@ -11,10 +11,7 @@ export class RestEvent extends AbstractEvent {
    return RestEvent.createRestProxy(this.values["noteLength"], this.app);
  };

-  public static createRestProxy = (
-    length: number,
-    app: Editor
-  ): RestEvent => {
+  public static createRestProxy = (length: number, app: Editor): RestEvent => {
    const instance = new RestEvent(length, app);
    return new Proxy(instance, {
      // @ts-ignore
--- a/src/classes/SoundEvent.ts
+++ b/src/classes/SoundEvent.ts
@ -293,7 +293,10 @@ export class SoundEvent extends AudibleEvent {
    },
  };

-  constructor(sound: string | string[] | SoundParams, public app: Editor) {
+  constructor(
+    sound: string | string[] | SoundParams,
+    public app: Editor,
+  ) {
    super(app);
    this.nudge = app.dough_nudge / 100;

@ -312,7 +315,7 @@ export class SoundEvent extends AudibleEvent {
  }

  private processSound = (
-    sound: string | string[] | SoundParams | SoundParams[]
+    sound: string | string[] | SoundParams | SoundParams[],
  ): SoundParams => {
    if (Array.isArray(sound) && typeof sound[0] === "string") {
      const s: string[] = [];
@ -356,7 +359,7 @@ export class SoundEvent extends AudibleEvent {

  private updateValue<T>(
    key: string,
-    value: T | T[] | SoundParams[] | null
+    value: T | T[] | SoundParams[] | null,
  ): this {
    if (value == null) return this;
    this.values[key] = value;
@ -392,7 +395,7 @@ export class SoundEvent extends AudibleEvent {
        (event.key as number) || "C4",
        (event.pitch as number) || 0,
        (event.parsedScale as number[]) || event.scale || "MAJOR",
-        (event.octave as number) || 0
+        (event.octave as number) || 0,
      );
      event.note = note;
      event.freq = midiToFreq(note);
@ -412,7 +415,7 @@ export class SoundEvent extends AudibleEvent {
  public invert = (howMany: number = 0) => {
    if (this.values.chord) {
      let notes = this.values.chord.map(
-        (obj: { [key: string]: number }) => obj.note
+        (obj: { [key: string]: number }) => obj.note,
      );
      notes = howMany < 0 ? [...notes].reverse() : notes;
      for (let i = 0; i < Math.abs(howMany); i++) {
@ -448,8 +451,14 @@ export class SoundEvent extends AudibleEvent {
      // const filteredEvent = filterObject(event, ["analyze","note","dur","freq","s"]);
      const filteredEvent = event;
      // No need for note if there is freq
-      if (filteredEvent.freq) { delete filteredEvent.note; }
-      superdough(filteredEvent, this.nudge - this.app.clock.deviation, filteredEvent.dur);
+      if (filteredEvent.freq) {
+        delete filteredEvent.note;
+      }
+      superdough(
+        filteredEvent,
+        this.nudge - this.app.clock.deviation,
+        filteredEvent.dur,
+      );
    }
  };
 }
--- a/src/classes/ZPlayer.ts
+++ b/src/classes/ZPlayer.ts
@ -246,6 +246,7 @@ export class Player extends AbstractEvent {
  }

  tonnetz(transform: string, tonnetz: TonnetzSpaces = [3, 4, 5]) {
+    // @ts-ignore
    if (this.atTheBeginning()) this.ziffers.tonnetz(transform, tonnetz);
    return this;
  }
--- a/src/documentation/audio_engine/amplitude.ts
+++ b/src/documentation/audio_engine/amplitude.ts
@ -20,7 +20,7 @@ ${makeExample(
  "Velocity manipulated by a counter",
  `
 beat(.5)::snd('cp').vel($(1)%10 / 10).out()`,
-    true
+  true,
 )}
 	
 ## Amplitude Enveloppe
@ -50,7 +50,7 @@ beat(.25)::smooth(sound('sawtooth')
 beat(.25)::smooth(sound('sawtooth')
  .note([50,57,55,60].add(12).beat(1.5))).out();
 	`,
-    true
+  true,
 )};
 	
 Sometimes, using a full ADSR envelope is a bit overkill. There are other simpler controls to manipulate the envelope like the <ic>.ad</ic> method:
@ -70,9 +70,8 @@ beat(.25)::smooth(sound('sawtooth')
 beat(.25)::smooth(sound('sawtooth')
  .note([50,57,55,60].add(12).beat(1.5))).out();
 	`,
-    true
+  true,
 )};

-`}
-
-
+`;
+};
--- a/src/documentation/audio_engine/audio_basics.ts
+++ b/src/documentation/audio_engine/audio_basics.ts
@ -22,7 +22,7 @@ ${makeExample(
 beat(1) && sound('bd').out()
 beat(0.5) && sound('hh').out()
 `,
-    true
+  true,
 )}
 	
 These commands, in plain english, can be translated to:
@ -38,7 +38,7 @@ ${makeExample(
 beat(1) && sound('bd').coarse(0.25).room(0.5).orbit(2).out();
 beat(0.5) && sound('hh').delay(0.25).delaytime(0.125).out();
 `,
-    true
+  true,
 )}
 	
 Now, it translates as follows:
@ -53,11 +53,13 @@ If you remove <ic>beat</ic> instruction, you will end up with a deluge of kick d

 To play a sound, you always need the <ic>.out()</ic> method at the end of your chain. THis method tells **Topos** to send the chain to the audio engine. The <ic>.out</ic> method can take an optional argument to send the sound to a numbered effect bus, from <ic>0</ic> to <ic>n</ic> :

-${makeExample("Using the .out method",
+${makeExample(
+  "Using the .out method",
  `
 // Playing a clap on the third bus (0-indexed)
 beat(1)::sound('cp').out(2)
-`, true
+`,
+  true,
 )}

 Try to remove <ic>.out</ic>. You will see that no sound is playing at all!
@ -67,7 +69,7 @@ Try to remove <ic>.out</ic>. You will see that no sound is playing at all!
 - Sounds are **composed** by adding qualifiers/parameters that modify the sound or synthesizer you have picked (_e.g_ <ic>sound('...').blabla(...)..something(...).out()</ic>. Think of it as _audio chains_. 
 	
 ${makeExample(
-    'Complex sonic object',
+  "Complex sonic object",
  `
 beat(1) :: sound('pad').n(1)
  .begin(rand(0, 0.4))
@ -75,7 +77,7 @@ beat(1) :: sound('pad').n(1)
  .size(0.9).room(0.9)
  .velocity(0.25)
  .pan(usine()).release(2).out()`,
-    true
+  true,
 )}

 ## Picking a specific sound
@ -104,7 +106,7 @@ ${makeExample(
  `
 beat(1) && sound('kick').n([1,2,3,4,5,6,7,8].pick()).out()
 `,
-    true
+  true,
 )}

 You can also use the <ic>:</ic> to pick a sample number directly from the <ic>sound</ic> function:
@ -114,7 +116,7 @@ You can also use the <ic>:</ic> to pick a sample number directly from the <ic>so
    `
 beat(1) && sound('kick:3').out()
 `,
-    true
+    true,
  )}

 You can use any number to pick a sound. Don't be afraid of using a number too big. If the number exceeds the number of available samples, it will simply wrap around and loop infinitely over the folder. Let's demonstrate this by using the mouse over a very large sample folder:
@ -124,7 +126,7 @@ ${makeExample(
  `
 // Move your mouse to change the sample being used!
 beat(.25) && sound('ST09').n(Math.floor(mouseX())).out()`,
-    true
+  true,
 )}
 	

@ -147,14 +149,18 @@ There is a special method to choose the _orbit_ that your sound is going to use:

 You can play a sound _dry_ and another sound _wet_. Take a look at this example where the reverb is only affecting one of the sounds:

-${makeExample("Dry and wet", `
+${makeExample(
+  "Dry and wet",
+  `

 // This sound is dry
 beat(1)::sound('hh').out()

 // This sound is wet (reverb)
 beat(2)::sound('cp').orbit(2).room(0.5).size(8).out()
-`, true)}
+`,
+  true,
+)}
 	
 ## The art of chaining
 	
@ -168,10 +174,9 @@ beat(0.25) && sound('fhh')
  .room(0.9).size(0.9).gain(1)
  .cutoff(usine(1/2) * 5000)
  .out()`,
-    true
+  true,
 )}
 	
 Most audio parameters can be used both for samples and synthesizers. This is quite unconventional if you are familiar with a more traditional music software.
-`}
-
-
+`;
+};
--- a/src/documentation/audio_engine/distortion.ts
+++ b/src/documentation/audio_engine/distortion.ts
@ -23,9 +23,8 @@ ${makeExample(
 beat(.5)::snd('pad').coarse($(1) % 16).clip(.5).out(); // Comment me
 beat(.5)::snd('pad').crush([16, 8, 4].beat(2)).clip(.5).out()
 	`,
-    true
+  true,
 )};

-`}
-
-
+`;
+};
--- a/src/documentation/audio_engine/reverb_delay.ts
+++ b/src/documentation/audio_engine/reverb_delay.ts
@ -28,7 +28,7 @@ ${makeExample(
  `
 beat(2)::snd('cp').room(0.5).size(4).out()
 	`,
-    true
+  true,
 )};
 	
 ## Delay
@ -42,10 +42,13 @@ A good sounding delay unit that can go into feedback territory. Use it without m
 | <ic>delayfeedback</ic> | delayfb | Delay feedback (between <ic>0</ic> and <ic>1</ic>) |
 	
 ${makeExample(
-    "Who doesn't like delay?", `
+  "Who doesn't like delay?",
+  `
 beat(2)::snd('cp').delay(0.5).delaytime(0.75).delayfb(0.8).out()
 beat(4)::snd('snare').out()
-beat(1)::snd('kick').out()`, true)}
+beat(1)::snd('kick').out()`,
+  true,
+)}

 ## Phaser

@ -56,13 +59,17 @@ beat(1)::snd('kick').out()`, true)}
 | <ic>phaserSweep</ic> | <ic>phassweep</ic>  | Phaser frequency sweep (in hertz) |
 | <ic>phaserCenter</ic> | <ic>phascenter</ic>  | Phaser center frequency (default to 1000) |

-${makeExample("Super cool phaser lick", `
+${makeExample(
+  "Super cool phaser lick",
+  `
 rhythm(.5, 7, 8)::sound('wt_stereo')
  .phaser(0.75).phaserSweep(3000)
  .phaserCenter(1500).phaserDepth(1)
  .note([0, 1, 2, 3, 4, 5, 6].scale('pentatonic', 50).beat(0.25))
  .room(0.5).size(4).out()
-`, true)}
+`,
+  true,
+)}

 ## Distorsion, saturation, destruction

@ -81,6 +88,7 @@ ${makeExample(
 beat(.5)::snd('pad').coarse($(1) % 16).clip(.5).out(); // Comment me
 beat(.5)::snd('pad').crush([16, 8, 4].beat(2)).clip(.5).out()
 	`,
-      true
+  true,
 )};
-`}
+`;
+};
--- a/src/documentation/audio_engine/sampler.ts
+++ b/src/documentation/audio_engine/sampler.ts
@ -38,7 +38,7 @@ beat(.5)::snd('pad').begin(0.2)
  .room(0.8).size(0.5)
  .clip(1).out()
 	`,
-    true
+  true,
 )};


@ -46,37 +46,53 @@ beat(.5)::snd('pad').begin(0.2)

 Let's play with the <ic>speed</ic> parameter to control the pitch of sample playback:

-${makeExample("Controlling the playback speed", `
+${makeExample(
+  "Controlling the playback speed",
+  `
 beat(0.5)::sound('notes')
  .speed([1,2,3,4].palindrome().beat(0.5)).out()
-`, true)}
+`,
+  true,
+)}

 It also works by using negative values. It reverses the playback:

-${makeExample("Playing samples backwards", `
+${makeExample(
+  "Playing samples backwards",
+  `
 beat(0.5)::sound('notes')
  .speed(-[1,2,3,4].palindrome().beat(0.5)).out()
-`, true)}
+`,
+  true,
+)}
 	
 Of course you can play melodies using samples:


-${makeExample("Playing melodies using samples", `
+${makeExample(
+  "Playing melodies using samples",
+  `
 beat(0.5)::sound('notes')
  .room(0.5).size(4)
  .note([0, 2, 3, 4, 5].scale('minor', 50).beat(0.5)).out()
-`, true)}
+`,
+  true,
+)}

 ## Panning

 To pan samples, use the <ic>.pan</ic> method with a number between <ic>0</ic> and <ic>1</ic>.


-${makeExample("Playing melodies using samples", `
+${makeExample(
+  "Playing melodies using samples",
+  `
 beat(0.25)::sound('notes')
  .room(0.5).size(4).pan(r(0, 1))
  .note([0, 2, 3, 4, 5].scale('minor', 50).beat(0.25)).out()
-`, true)}
+`,
+  true,
+)}


 ## Looping over a sample
@ -84,13 +100,17 @@ beat(0.25)::sound('notes')
 Using <ic>loop</ic> (<ic>1</ic> for looping), <ic>loopBegin</ic> and <ic>loopEnd</ic> (between <ic>0</ic> and <ic>1</ic>), you can loop over the length of a sample. It can be super effective to create granular effects.


-${makeExample("Granulation using loop", `
+${makeExample(
+  "Granulation using loop",
+  `
 beat(0.25)::sound('fikea').loop(1)
  .lpf(ir(2000, 5000))
  .loopBegin(0).loopEnd(r(0, 1))
  .room(0.5).size(4).pan(r(0, 1))
  .note([0, 2, 3, 4, 5].scale('minor', 50).beat(0.25)).out()
-`, true)}
+`,
+  true,
+)}

 ## Stretching a sample

@ -111,34 +131,45 @@ Sometimes, you will find it necessary to cut a sample. It can be because the sam

 Know about the <ic>begin</ic> and <ic>end</ic> parameters. They are not related to the sampler itself, but to the length of the event you are playing. Let's cut the granular example:

-${makeExample("Cutting a sample using end", `
+${makeExample(
+  "Cutting a sample using end",
+  `
 beat(0.25)::sound('notes')
  .end(usine(1/2)/0.5)
  .room(0.5).size(4).pan(r(0, 1))
  .note([0, 2, 3, 4, 5].scale('minor', 50).beat(0.25)).out()
-`, true)}
+`,
+  true,
+)}

 You can also use <ic>clip</ic> to cut the sample everytime a new sample comes in:


-${makeExample("Cutting a sample using end", `
+${makeExample(
+  "Cutting a sample using end",
+  `
 beat(0.125)::sound('notes')
  .cut(1)
  .room(0.5).size(4).pan(r(0, 1))
  .note([0, 2, 3, 4, 5].scale('minor', 50).beat(0.125) 
  + [-12,12].beat()).out()
-`, true)}
+`,
+  true,
+)}

 ## Adding vibrato to samples

 You can add vibrato to any sample using <ic>vib</ic> and <ic>vibmod</ic>:

-${makeExample("Adding vibrato to a sample", `
+${makeExample(
+  "Adding vibrato to a sample",
+  `

 beat(1)::sound('fhang').vib([1, 2, 4].bar()).vibmod([0.5, 2].beat()).out()
-`, true)}
-
-
-`}
+`,
+  true,
+)}


+`;
+};
--- a/src/documentation/basics/code.ts
+++ b/src/documentation/basics/code.ts
@ -22,7 +22,7 @@ The code you enter in any of the scripts is evaluated in strict mode. This tells
 	
 - **about variables:** the state of your variables is not kept between iterations. If you write <ic>let a = 2</ic> and remove that value from your script, **it will crash**! Variable and state is not preserved between each run of the script. There are other ways to deal with variables and to share variables between scripts! Some variables like **iterators** can keep their state between iterations because they are saved **with the file itself**. There is also **global variables**.
 - **about errors and printing:** your code will crash! Don't worry, we do our best to make it crash in the most gracious way possible. Most errors are caught and displayed in the interface. For weirder bugs, open the dev console with ${key_shortcut(
-    "Ctrl + Shift + I"
+    "Ctrl + Shift + I",
  )}. You cannot directly use <ic>console.log('hello, world')</ic> in the interface but you can use <ic>log(message)</ic> to print a one line message. You will have to open the console as well to see your messages being printed there!
 - **about new syntax:** sometimes, we had some fun with JavaScript's syntax in order to make it easier/faster to write on stage. <ic>&&</ic> can also be written <ic>::</ic> or <ic>-></ic> because it is faster to type or better for the eyes!
 	
@ -42,7 +42,7 @@ beat(1) :: snd('bd').out()
 //// beat(1) :: snd('bd').out() 

 `,
-    true
+  true,
 )}

 ${makeExample(
@ -52,7 +52,7 @@ ${makeExample(
 beat(4) ? snd('kick').out() : beat(2) :: snd('snare').out()
 // (true) ? log('very true') : log('very false')
 `,
-    false
+  false,
 )}


@ -63,7 +63,7 @@ ${makeExample(
 beat(4) ? snd('kick').out() : beat(2) :: snd('snare').out()
 !beat(2) :: beat(0.5) :: snd('clap').out()
 `,
-    false
+  false,
 )}

 # About crashes and bugs
@ -76,7 +76,7 @@ ${makeExample(
 // This is crashing. See? No harm!
 qjldfqsdklqsjdlkqjsdlqkjdlksjd
 `,
-    true
+  true,
 )}

 `;
--- a/src/documentation/basics/interface.ts
+++ b/src/documentation/basics/interface.ts
@ -18,22 +18,22 @@ The Topos interface is designed on a simple concept: _scripts_ and _universes_.
 Every Topos session is composed of **local**, **global** and **init** scripts. These scripts form a structure called a "_universe_".  The scripts can describe whatever you want: songs, sketches, small tools, or whatever. All the scripts are written using the JavaScript programming language. They describe a musical or algorithmic process. You can call them anytime.
 	
 - **the global script** (${key_shortcut(
-    "Ctrl + G"
+    "Ctrl + G",
  )}): _Evaluated for every clock pulse_. The central piece, acting as the conductor for all the other scripts. You can also jam directly from the global script to test your ideas before pushing them to a separate script. You can also access that script using the ${key_shortcut(
-    "F10"
+    "F10",
  )} key.
 - **the local scripts** (${key_shortcut(
-    "Ctrl + L"
+    "Ctrl + L",
  )}): _Evaluated on demand_. Local scripts are used to store anything too complex to sit in the global script. It can be a musical process, a whole section of your composition, a complex controller that you've built for your hardware, etc... You can also switch to one of the local scripts by using the function keys (${key_shortcut(
-    "F1"
+    "F1",
  )} to ${key_shortcut("F9")}).
 - **the init script** (${key_shortcut(
-    "Ctrl + I"
+    "Ctrl + I",
  )}): _Evaluated on program load_. Used to set up the software the session to the desired state before playing, for example changing bpm or to initialize global variables (See Functions). You can also access that script using the ${key_shortcut(
-    "F11"
+    "F11",
  )} key.
 - **the note file** (${key_shortcut(
-    "Ctrl + N"
+    "Ctrl + N",
  )}): _Not evaluated_. Used to store your thoughts or commentaries about the session you are currently playing. It is nothing more than a scratchpad really!
 	

@ -43,7 +43,7 @@ ${makeExample(
 beat(1) :: script(1) // Calling local script n°1 
 flip(4) :: beat(.5) :: script(2) // Calling script n°2
 `,
-    true
+  true,
 )}

 ${makeExample(
@ -54,7 +54,7 @@ beat(1) :: script([1, 3, 5].pick())
 flip(4) :: beat([.5, .25].beat(16)) :: script(
  [5, 6, 7, 8].beat())
 `,
-    false
+  false,
 )}

 ### Navigating the interface
@ -81,7 +81,7 @@ There are some useful functions to help you manage your scripts:


 A set of files is called a _universe_. You can switch between universes immediately immediately by pressing ${key_shortcut(
-    "Ctrl + B"
+    "Ctrl + B",
  )}. You can also create a new universe by entering a name. Load a universe by typing its name. Once a universe is loaded, it is not possible to call any data/code from any other universe. Switching between universes does not stop the transport nor reset the clock. The context switches but time keeps flowing. This can be useful for transitioning between songs / parts. 

 There are some useful functions to help you manage your universes:
--- a/src/documentation/basics/keyboard.ts
+++ b/src/documentation/basics/keyboard.ts
@ -14,10 +14,10 @@ Topos is made to be controlled entirely with a keyboard. It is recommanded to st
 | Shortcut | Key   | Description                                                |
 |----------|-------|------------------------------------------------------------|
 |**Start/Pause** transport|${key_shortcut(
-    "Ctrl + P"
+    "Ctrl + P",
  )}|Start or pause audio playback|
 |**Stop** the transport |${key_shortcut(
-    "Ctrl + S"
+    "Ctrl + S",
  )}|Stop and rewind audio playback|
 	
 ### Moving in the interface
@ -26,15 +26,15 @@ Topos is made to be controlled entirely with a keyboard. It is recommanded to st
 |----------|-------|------------------------------------------------------------|
 |Universe switch|${key_shortcut("Ctrl + B")}|Switch to a new universe|
 |Global Script|${key_shortcut("Ctrl + G")} or ${key_shortcut(
-    "F10"
+    "F10",
  )}|Switch to global script |
 |Local scripts|${key_shortcut("Ctrl + L")} or ${key_shortcut(
-    "F11"
+    "F11",
  )}|Switch to local scripts |
 |Init script|${key_shortcut("Ctrl + L")}|Switch to init script|
 |Note File|${key_shortcut("Ctrl + N")}|Switch to note file|
 |Local Script|${key_shortcut("F1")} to ${key_shortcut(
-    "F9"
+    "F9",
  )}|Switch to a specific local script|
 |Documentation|${key_shortcut("Ctrl + D")}|Open the documentation|
 	
@ -44,10 +44,10 @@ Topos is made to be controlled entirely with a keyboard. It is recommanded to st
 |----------|-------|------------------------------------------------------------|
 |Evaluate|${key_shortcut("Ctrl + Enter")}| Evaluate the current script        |
 |Local Eval|${key_shortcut("Ctrl + F1")} to ${key_shortcut(
-    "Ctrl + F9"
+    "Ctrl + F9",
  )}|Local File Evaluation|
 |Force Eval|${key_shortcut(
-    "Ctrl + Shift + Enter"
+    "Ctrl + Shift + Enter",
  )}|Force evaluation of the current script|
 	
 ### Special
@ -60,9 +60,9 @@ Topos is made to be controlled entirely with a keyboard. It is recommanded to st
 # Keyboard Fill

 By pressing the ${key_shortcut(
-    "Alt"
+    "Alt",
  )} key, you can trigger the <ic>Fill</ic> mode which can either be <ic>true</ic> or <ic>false</ic>. The fill will be set to <ic>true</ic> as long as the key is held. Try pressing ${key_shortcut(
-    "Alt"
+    "Alt",
  )} when playing this example:

 ${makeExample(
@ -70,7 +70,7 @@ ${makeExample(
  `
 beat(fill() ? 1/4 : 1/2)::sound('cp').out()
 `,
-  true
+  true,
 )}

 `;
--- a/src/documentation/basics/mouse.ts
+++ b/src/documentation/basics/mouse.ts
@ -27,7 +27,7 @@ beat(.25) :: sound('sine')
  .pan(r(0, 1))
  .room(0.35).size(4).out()
 `,
-    true
+  true,
 )}

 <br>
@ -46,7 +46,7 @@ beat(.25) :: sound('sine')
  .delay(0.5).delayt(1/6).delayfb(0.2)
  .note(noteX())
  .room(0.35).size(4).out()`,
-    true
+  true,
 )}

 ## Mouse and Arrays
@ -64,7 +64,7 @@ log([1,2,3,4].mouseX())
 log([4,5,6,7].mouseY())

  `,
-    true
+  true,
 )}


--- a/src/documentation/basics/welcome.ts
+++ b/src/documentation/basics/welcome.ts
@ -8,13 +8,13 @@ export const introduction = (application: Editor): string => {
 # Welcome
 	
 Welcome to the **Topos** documentation. You can jump here anytime by pressing ${key_shortcut(
-    "Ctrl + D"
+    "Ctrl + D",
  )}.  Press again to make the documentation disappear. Contributions are much appreciated! The documentation [lives here](https://github.com/Bubobubobubobubo/topos/tree/main/src/documentation).

 ${makeExample(
  "Welcome! Eval to get started",
  examples[Math.floor(Math.random() * examples.length)],
-    true
+  true,
 )}
 	
 # What is Topos?
@ -30,7 +30,7 @@ rhythm(.25, [5, 7].beat(2), 8) :: sound(['hc', 'fikea', 'hat'].pick(1))
  .db(-ir(1,8)).speed([1,[0.5, 2].pick()]).room(0.5).size(3).o(4).out()
 beat([2,0.5].dur(13.5, 0.5))::snd('fsoftsnare')
  .n(0).speed([1, 0.5]).o(4).out()`,
-    false
+  false,
 )}

 ${makeExample(
@ -47,7 +47,7 @@ beat(.25)::snd('sine')
  .delay(0.5).delayt(0.25).delayfb(0.7) // Delay
  .room(0.5).size(8) // Reverb
  .out()`,
-    false
+  false,
 )}

 ${makeExample(
@ -58,7 +58,7 @@ beat(.5) :: sound('sid').n($(2))
 beat(.25) :: sound('sid').note(
  [34, 36, 41].beat(.25) + [[0,-24].pick(),12].beat())
  .room(0.9).size(0.9).n(4).out()`,
-    false
+  false,
 )}
 	
 Topos is deeply inspired by the [Monome Teletype](https://monome.org/). The Teletype is/was an open source hardware module for Eurorack synthesizers. While the Teletype was initially born as an hardware module, Topos aims to be a web-browser based cousin of it! It is a sequencer, a scriptable interface, a companion for algorithmic music-making. Topos wishes to fullfill the same goal as the Teletype, keeping the same spirit alive on the web. It is free, open-source, and made to be shared and used by everyone.  Learn more about live coding on [livecoding.fr](https://livecoding.fr).
@ -66,7 +66,7 @@ Topos is deeply inspired by the [Monome Teletype](https://monome.org/). The Tele
 ## Demo Songs

 Reloading the application will get you one random song example to study every time. Press ${key_shortcut(
-    "F5"
+    "F5",
  )} and listen to them all! The demo songs are also used a bit everywhere in the documentation to illustrate some of the working principles :).
 `;
 };
--- a/src/documentation/chaining.ts
+++ b/src/documentation/chaining.ts
@ -12,7 +12,8 @@ ${makeExample(
  "Method chaining",
  `
 beat(1)::sound('bd').speed(2).lpf(500).out()
-`, true
+`,
+  true,
 )}

 Method chains become fun if you add just a little bit of complexity to them. You can start to add conditions, start to register complex chains to be re-used later on, etc.. We will not remind you how to write basic chains. The whole documentation is full of examples! Let's explore more delicate patterns!
@ -29,7 +30,8 @@ register('juxrev', n=>n.pan([0, 1]).speed([1, -1]))

 // Using our new abstraction
 beat(1)::sound('fhh').juxrev().out()
-`, true
+`,
+  true,
 )}

 This is an extremely powerful construct. For example, you can use it to create synthesizer presets and reuse them later on. You can also define parameters for your registered functions. For example:
@ -48,7 +50,8 @@ register('sub', (n,x=4,y=80)=>n.ad(0, .25)
 // Using it with an arpeggio
 rhythm(.25, [6, 8].beat(), 12)::sound('sine')
  .note([0, 2, 4, 5].scale('minor', 50).beat(0.5))
-  .sub(8).out()`, true
+  .sub(8).out()`,
+  true,
 )}


@ -65,7 +68,7 @@ beat(.5) && sound('fhh')
  .odds(1/4, s => s.speed(irand(1,4)))
  .rarely(s => s.room(0.5).size(8).speed(0.5))
  .out()`,
-    true
+  true,
 )}
 ${makeExample(
  "Chance to play a random note",
@ -77,7 +80,7 @@ beat(.5) && sound('pluck').note(60)
  .note(62)
  .room(0.5).size(3)
  .out()`,
-    false
+  false,
 )}

 There is a growing collection of probability and chance methods you can use:
@ -111,7 +114,7 @@ ${makeExample(
  .often(n => n.note+=4)
  .sometimes(s => s.velocity(irand(50,100)))
  .out()`,
-    true
+  true,
 )};

 ## Ziffers
@ -134,7 +137,7 @@ z1('s 0 5 7 0 3 7 0 2 7 0 1 7 0 1 6 5 4 3 2')
  .odds(1/2, n => n.speed(0.5))
  .room(0.5).size(0.5).out()
 `,
-    true
+  true,
 )};
 `;
 };
--- a/src/documentation/engine.ts
+++ b/src/documentation/engine.ts
@ -35,7 +35,7 @@ beat(.5)::snd('pad').begin(0.2)
  .room(0.8).size(0.5)
  .clip(1).out()
 	`,
-    true
+  true,
 )};
 	
 ${makeExample(
@ -70,7 +70,7 @@ beat(.5) && snd('sawtooth')
  .resonance(0.9).freq([100,150].pick())
  .out()
 	`,
-    true
+  true,
 )};
 	
 	
--- a/src/documentation/functions.ts
+++ b/src/documentation/functions.ts
@ -19,7 +19,7 @@ ${makeExample(
  `
 beat(1) :: script(1)
 `,
-    true
+  true,
 )}

 ${makeExample(
@ -27,7 +27,7 @@ ${makeExample(
  `
 beat(1) :: script(1, 3, 5)
 `,
-    false
+  false,
 )}

 ## Math functions
@ -48,7 +48,7 @@ ${makeExample(
 beat(.5) :: delay(usine(.125) * 80, () => sound('east').out())
 beat(.5) :: delay(50, () => sound('east').out())
 `,
-    true
+  true,
 )}

 - <ic>delayr(ms: number, nb: number, func: Function): void</ic>: Delays the execution of a function by a given number of milliseconds, repeated a given number of times.
@ -59,7 +59,7 @@ ${makeExample(
 beat(1) :: delayr(50, 4, () => sound('east').speed([0.5,.25].beat()).out())
 flip(2) :: beat(2) :: delayr(150, 4, () => sound('east').speed([0.5,.25].beat() * 4).out())
 `,
-    true
+  true,
 )};
 `;
 };
--- a/src/documentation/inlineHelp.ts
+++ b/src/documentation/inlineHelp.ts
@ -969,7 +969,7 @@ export const inlineHoveringTips = hoverTooltip(
        return { dom };
      },
    };
-  }
+  },
 );

 export const toposCompletions = (context: CompletionContext) => {
--- a/src/documentation/interaction.ts
+++ b/src/documentation/interaction.ts
@ -24,7 +24,7 @@ ${makeExample(
  `
  beat(1) && active_notes() && sound('sine').chord(active_notes()).out()
  `,
-  true
+  true,
 )}

 ${makeExample(
@ -34,7 +34,7 @@ ${makeExample(
    active_notes().beat(0.5)+[12,24].beat(0.25)
  ).cutoff(300 + usine(1/4) * 2000).out()
  `,
-  false
+  false,
 )}


@ -46,7 +46,7 @@ ${makeExample(
  beat(0.25) && sticky_notes() && sound('arp')
  .note(sticky_notes().palindrome().beat(0.25)).out()
  `,
-  true
+  true,
 )}

 * <ic>last_note(channel?: number)</ic>: returns the last note that has been received. Returns 60 if no other notes have been received.
@ -58,7 +58,7 @@ ${makeExample(
  .vib([1, 3, 5].beat(1))
  .vibmod([1,3,2,4].beat(2)).out()
  `,
-  false
+  false,
 )}

 * <ic>buffer()</ic>: return true if there are notes in the buffer.
@ -69,7 +69,7 @@ ${makeExample(
  `
  beat(1) && buffer() && sound('sine').note(buffer_note()).out()
  `,
-  false
+  false,
 )}


@ -87,7 +87,7 @@ ${makeExample(
  `
  beat(0.5) && sound('arp').note(last_cc(74)).out()
  `,
-  true
+  true,
 )}

 ${makeExample(
@ -105,7 +105,7 @@ beat(last_cc(74)/127*.5) :: sound('sine')
  .sustain(last_cc(74)/127*.25)
  .out()
  `,
-  false
+  false,
 )}


@ -128,7 +128,7 @@ Topos can output scales to external keyboards lighted keys using the following f
 ${makeExample(
  "Show scale on external keyboard",
  `show_scale("F","aeolian",0,4)`,
-  true
+  true,
 )}

 ${makeExample("Hide scale", `hide_scale("F","aeolian",0,4)`, true)}
--- a/src/documentation/lfos.ts
+++ b/src/documentation/lfos.ts
@ -17,7 +17,7 @@ Low Frequency Oscillators (_LFOs_) are an important piece in any digital audio w
 ${makeExample(
  "Modulating the speed of a sample player using a sine LFO",
  `beat(.25) && snd('cp').speed(1 + usine(0.25) * 2).out()`,
-    true
+  true,
 )};

 - <ic>triangle(freq: number = 1, times: number = 1, offset: number= 0): number</ic>: returns a triangle oscillation between <ic>-1</ic> and <ic>1</ic>.
@ -26,7 +26,7 @@ ${makeExample(
 ${makeExample(
  "Modulating the speed of a sample player using a triangle LFO",
  `beat(.25) && snd('cp').speed(1 + utriangle(0.25) * 2).out()`,
-    true
+  true,
 )}
 	
 - <ic>saw(freq: number = 1, times: number = 1, offset: number= 0): number</ic>: returns a sawtooth-like oscillation between <ic>-1</ic> and <ic>1</ic>.
@ -35,7 +35,7 @@ ${makeExample(
 ${makeExample(
  "Modulating the speed of a sample player using a saw LFO",
  `beat(.25) && snd('cp').speed(1 + usaw(0.25) * 2).out()`,
-    true
+  true,
 )}
 	
 - <ic>square(freq: number = 1, times: number = 1, offset: number= 0, duty: number = .5): number</ic>: returns a square wave oscillation between <ic>-1</ic> and <ic>1</ic>. You can also control the duty cycle using the <ic>duty</ic> parameter.
@ -44,7 +44,7 @@ ${makeExample(
 ${makeExample(
  "Modulating the speed of a sample player using a square LFO",
  `beat(.25) && snd('cp').speed(1 + usquare(0.25, 0, 0.25) * 2).out()`,
-    true
+  true,
 )};
 	
 - <ic>noise(times: number = 1)</ic>: returns a random value between -1 and 1.
@ -52,8 +52,8 @@ ${makeExample(
 ${makeExample(
  "Modulating the speed of a sample player using noise",
  `beat(.25) && snd('cp').speed(1 + noise() * 2).out()`,
-    true
+  true,
 )};

-`
-}
+`;
+};
--- a/src/documentation/long_forms.ts
+++ b/src/documentation/long_forms.ts
@ -19,7 +19,7 @@ ${makeExample(
 // Playing each script for 8 bars in succession
 script([1,2,3,4].bar(8))
  `,
-    true
+  true,
 )}

 You can also give a specific duration to each section using <ic>.dur</ic>:
@ -29,7 +29,7 @@ ${makeExample(
  `
 script([1,2,3,4].dur(8, 2, 16, 4))
  `,
-    true
+  true,
 )}

 - **Use universes as well**. Transitions between universes are _seamless_, instantaneous. Just switch to different content if you ever hit the limitations of the current _universe_.
@ -44,7 +44,7 @@ ${makeExample(
  `
 flip(4) :: beat(1) :: snd('kick').out()
 `,
-    true
+  true,
 )}

 ${makeExample(
@ -56,7 +56,7 @@ flip(2.5, 75) :: beat(.25) :: snd('click')
 flip(2.5) :: beat(.5) :: snd('bd').out()
 beat(.25) :: sound('hat').end(0.1).cutoff(1200).pan(usine(1/4)).out()
 `,
-    false
+  false,
 )}

 ${makeExample(
@ -68,7 +68,7 @@ if (flip(4, 75)) {
  beat(.5) :: snd('snare').out()
 }
 `,
-    true
+  true,
 )}
 	
 <ic>flip</ic> is extremely powerful and is used internally for a lot of other Topos functions. You can also use it to think about **longer durations** spanning over multiple bars. Here is a silly composition that is using <ic>flip</ic> to generate a 4 bars long pattern.
@ -93,7 +93,7 @@ if (flip(8)) {
  beat(.5)::snd('diphone').end(0.5).n([1,2,3,4].pick()).out()
 }
 `,
-    true
+  true,
 )}
 	
 You can use it everywhere to spice things up, including as a method parameter picker:
@ -103,7 +103,7 @@ ${makeExample(
  `
 beat(.5)::snd(flip(2) ? 'kick' : 'hat').out()
 `,
-    true
+  true,
 )}
 	
 - <ic>flipbar(n: number = 1)</ic>: this method works just like <ic>flip</ic> but counts in bars instead of beats. It allows you to think about even larger time cycles. You can also pair it with regular <ic>flip</ic> for writing complex and long-spanning algorithmic beats.
@ -122,7 +122,7 @@ function b() {
 flipbar(2) && a()
 flipbar(3) && b()
 `,
-    true
+  true,
 )}
 ${makeExample(
  "Alternating over four bars",
@ -131,7 +131,7 @@ flipbar(2)
  ? beat(.5) && snd(['kick', 'hh'].beat(1)).out()
  : beat(.5) && snd(['east', 'east:2'].beat(1)).out()
 `,
-    false
+  false,
 )};

 	
@ -155,7 +155,7 @@ if (onbar([1,2], 4)) {
    rhythm(.5, 1, 7) :: snd('jvbass').n(2).out();
    rhythm(.5, 2, 7) :: snd('snare').n(3).out();
 }`,
-    true
+  true,
 )}

 `;
--- a/src/documentation/midi.ts
+++ b/src/documentation/midi.ts
@ -15,9 +15,9 @@ You can use Topos to play MIDI thanks to the [WebMIDI API](https://developer.moz
 Your web browser is capable of sending and receiving MIDI information through the [Web MIDI API](https://developer.mozilla.org/en-US/docs/Web/API/Web_MIDI_API). The support for MIDI on browsers is a bit shaky. Please, take some time to configure and test. To our best knowledge, **Chrome** is currently leading on this feature, followed closely by **Firefox**. The other major web browsers are also starting to support this API. **There are two important functions for configuration:**

 - <ic>midi_outputs()</ic>: prints the list of available MIDI devices on the screen. You will have to open the web console using ${key_shortcut(
-    "Ctrl+Shift+I"
+    "Ctrl+Shift+I",
  )} or sometimes ${key_shortcut(
-    "F12"
+    "F12",
  )}. You can also open it from the menu of your web browser. **Note:** close the docs to see it printed.


@ -26,7 +26,7 @@ ${makeExample(
  `
 midi_outputs()
 `,
-    true
+  true,
 )}

 - <ic>midi_output(output_name: string)</ic>: enter your desired output to connect to it.
@ -36,7 +36,7 @@ ${makeExample(
  `
 midi_output("MIDI Rocket-Trumpet")
 `,
-    true
+  true,
 )}

 That's it! You are now ready to play with MIDI.
@ -54,7 +54,7 @@ ${makeExample(
 // => midi_output("MIDI Bus 1")
 rhythm(.5, 5, 8) :: midi(50).out()
 `,
-    true
+  true,
 )}

 ${makeExample(
@ -63,7 +63,7 @@ ${makeExample(
 // MIDI Note 50, Velocity 50 + LFO, Channel 0
 rhythm(.5, 5, 8) :: midi(50, 50 + usine(.5) * 20, 0).out()
 `,
-    false
+  false,
 )}

 ${makeExample(
@ -72,7 +72,7 @@ ${makeExample(
 // MIDI Note 50, Velocity 50 + LFO, Channel 0
 rhythm(.5, 5, 8) :: midi({note: 50, velocity: 50 + usine(.5) * 20, channel: 0}).out()
 `,
-    false
+  false,
 )}

 We can now have some fun and starting playing a small piano piece:
@ -86,7 +86,7 @@ beat(.25) && midi([64, 76].pick()).sustain(0.05).out()
 beat(.75) && midi([64, 67, 69].beat()).sustain(0.05).out()
 beat(.25) && midi([64, 67, 69].beat() + 24).sustain(0.05).out()
 `,
-    true
+  true,
 )}

 ## Control and Program Changes
@ -99,7 +99,7 @@ ${makeExample(
 control_change({control: [24,25].pick(), value: irand(1,120), channel: 1})
 control_change({control: [30,35].pick(), value: irand(1,120) / 2, channel: 1})
 `,
-    true
+  true,
 )}
 	
 - <ic>program_change(program: number, channel: number)</ic>: send a MIDI Program Change. This function takes two arguments to specify the program and the channel (_e.g._ <ic>program_change(1, 1)</ic>).
@ -109,7 +109,7 @@ ${makeExample(
  `
 program_change([1,2,3,4,5,6,7,8].pick(), 1)
 `,
-    true
+  true,
 )}
 	
 	
@ -123,7 +123,7 @@ ${makeExample(
  `
 sysex(0x90, 0x40, 0x7f)
 `,
-    true
+  true,
 )}

 ## Clock
@ -135,7 +135,7 @@ ${makeExample(
  `
 beat(.25) && midi_clock() // Sending clock to MIDI device from the global buffer
 `,
-    true
+  true,
 )}

 ## Using midi with ziffers
@ -147,7 +147,7 @@ ${makeExample(
  `
  z1('0 2 e 5 2 q 4 2').midi().port(2).channel(4).out()
  `,
-    true
+  true,
 )}

 ${makeExample(
@ -155,7 +155,7 @@ ${makeExample(
  `
  z1('(0 2 e 5 2):0 (4 2):1').midi().out()
  `,
-    true
+  true,
 )}

 `;
--- a/src/documentation/more/bonus.ts
+++ b/src/documentation/more/bonus.ts
@ -20,11 +20,11 @@ Some features are here "just for fun" or "just because I can". They are not very
 ${makeExample(
  "Hydra integration",
  `beat(4) :: app.hydra.osc(3, 0.5, 2).out()`,
-    true
+  true,
 )}

 You may feel like it's doing nothing! Press ${key_shortcut(
-    "Ctrl+D"
+    "Ctrl+D",
  )} to close the documentation. **Boom, all shiny!**

 Be careful not to call <ic>app.hydra</ic> too often as it can impact performances. You can use any rhythmical function like <ic>mod()</ic> function to limit the number of function calls. You can write any Topos code like <ic>[1,2,3].beat()</ic> to bring some life and movement in your Hydra sketches.
@ -37,7 +37,7 @@ ${makeExample(
 beat(4) :: stop_hydra()     // this one
 beat(4) :: app.hydra.hush() // or this one
 `,
-    true
+  true,
 )}

 I won't teach you how to play with Hydra. You can find some great resources on the [Hydra website](https://hydra.ojack.xyz/):
@ -62,8 +62,8 @@ beat(0.25)::gif({
  rotation: ir(1, 360), // Rotation (in degrees)
  posX: ir(1,1200), // CSS Horizontal Position
  posY: ir(1, 800), // CSS Vertical Position
-`, true
+`,
+  true,
 )}
 `;
 };
-
--- a/src/documentation/more/oscilloscope.ts
+++ b/src/documentation/more/oscilloscope.ts
@ -23,7 +23,7 @@ scope({
    refresh: 1 // refresh rate (in pulses)
 })
  `,
-    true
+  true,
 )}

 ${makeExample(
@ -44,7 +44,7 @@ scope({enabled: true, thickness: 8,
  color: ['purple', 'green', 'random'].beat(), 
  size: 0.5, fftSize: 2048}) 
    `,
-    true
+  true,
 )}

 Note that these values can be patterned as well! You can transform the oscilloscope into its own light show if you want. The picture is not stable anyway so you won't have much use of it for precision work :)
--- a/src/documentation/patterns.ts
+++ b/src/documentation/patterns.ts
@ -14,7 +14,7 @@ ${makeExample(
  `
 beat(1)::sound('kick').out()
 `,
-    true
+  true,
 )}

 can be turned into something more interesting like this easily:
@ -26,7 +26,7 @@ let c = [1,2].dur(3, 1)
 beat([1, 0.5, 0.25].dur(0.75, 0.25, 1) / c)::sound(['kick', 'fsoftsnare'].beat(0.75))
  .ad(0, .25).shape(usine(1/2)*0.5).speed([1, 2, 4].beat(0.5)).out()
 `,
-    true
+  true,
 )}


@ -44,7 +44,7 @@ beat([1, 0.75].beat(4)) :: sound('cp').out()
 beat([0.5, 1].beat(4)) :: sound('kick').out()
 beat(2)::snd('snare').shape(.5).out()
 `,
-    true
+  true,
 )}
 ${makeExample(
  "Using beat to create arpeggios",
@ -62,7 +62,7 @@ beat([.5, .25].beat(0.5)) :: sound('sine')
  .delayfb(0.5)
  .out()
 `,
-    false
+  false,
 )}
 ${makeExample(
  "Cool ambiance",
@ -73,7 +73,7 @@ flip(2)::beat(1)::snd('froomy').out()
 flip(4)::beat(2)::snd('pad').n(2).shape(.5)
  .orbit(2).room(0.9).size(0.9).release(0.5).out()
 `,
-    false
+  false,
 )}

 - <ic>bar(value: number = 1)</ic>: returns the next value every bar (if <ic>value = 1</ic>). Using a larger value will return the next value every <ic>n</ic> bars.
@ -88,7 +88,7 @@ beat([1/4, 1/2].dur(1.5, 0.5))::sound(['jvbass', 'fikea'].bar())
    * [1, 2].bar())
  .out()
 `,
-    true
+  true,
 )}

 ${makeExample(
@ -101,7 +101,7 @@ beat([1, 0.5].beat()) :: sound(['bass3'].bar())
  .pan(r(0, 1))
  .speed([1,2,3].beat())
  .out()
-`
+`,
 )}

 - <ic>dur(...list: numbers[])</ic> : keeps the same value for a duration of <ic>n</ic> beats corresponding to the <ic>nth</ic> number of the list you provide.
@ -117,7 +117,7 @@ beat(0.5)::sound('notes').n([1,2].dur(1, 2))
 beat(1)::sound(['kick', 'fsnare'].dur(3, 1))
  .n([0,3].dur(3, 1)).out()
  `,
-    true
+  true,
 )}

 ## Manipulating notes and scales
@ -133,7 +133,7 @@ beat(0.25) :: snd('sine')
  .key(["F4","F3"].beat(2.0))
  .scale("minor").ad(0, .25).out()
 `,
-    true
+  true,
 )}

  - <ic>scale(scale: string, base note: number)</ic>: Map each element of the list to the closest note of the slected scale. [0, 2, 3, 5 ].scale("major", 50) returns [50, 52, <ic>54</ic>, 55]. You can use western scale names like (Major, Minor, Minor pentatonic ...) or [zeitler](https://ianring.com/musictheory/scales/traditions/zeitler) scale names. Alternatively you can also use the integers as used by Ian Ring in his [study of scales](https://ianring.com/musictheory/scales/).
@ -145,7 +145,7 @@ beat(1) :: snd('gtr')
  .note([0, 5, 2, 1, 7].scale("Major", 52).beat())
  .out()
 `,
-    true
+  true,
 )}

 - <ic>scaleArp(scale: string, mask: number)</ic>: extrapolate a custom-masked scale from each list elements. [0].scale("major", 3) returns [0,2,4]. <ic>scaleArp</ic> supports the same scales as <ic>scale</ic>.
@ -157,7 +157,7 @@ beat(1) :: snd('gtr')
  .note([0, 5].scaleArp("mixolydian", 3).beat() + 50)
  .out()
 `,
-    true
+  true,
 )}

 ## Iteration using the mouse
@ -173,7 +173,7 @@ beat(0.25)::sound('wt_piano')
  .room(0.5).size(4).lpad(-2, .2).lpf(500, 0.3)
  .ad(0, .2).out()
 `,
-    true
+  true,
 )}

 ## Simple data operations
@ -191,7 +191,7 @@ beat([1,.5,.25].beat()) :: snd('wt_stereo')
  .lpf([500,1000,2000,4000].palindrome().beat())
  .lpad(4, 0, .25).sustain(0.125).out()
 `,
-    true
+  true,
 )}

 - <ic>random(index: number)</ic>: pick a random element in the given list.
@ -210,7 +210,7 @@ beat([.5, 1].rand() / 2) :: snd(
  .lpf([5000,3000,2000].pick())
  .end(0.5).out()
 `,
-    true
+  true,
 )}

 - <ic>pick()</ic>: pick a random element in the list.
@ -222,7 +222,7 @@ beat(0.25)::sound(['ftabla', 'fwood'].pick())
  .speed([1,2,3,4].pick()).ad(0, .125).n(ir(1,10))
  .room(0.5).size(1).out()
  `,
-    true
+  true,
 )}

 - <ic>degrade(amount: number)</ic>: removes _n_% of the list elements. Lists can be degraded as long as one element remains. The amount of degradation is given as a percentage.
@ -233,7 +233,7 @@ ${makeExample(
 // Tweak the value to degrade this amen break even more!
 beat(.25)::snd('amencutup').n([1,2,3,4,5,6,7,8,9].degrade(20).loop($(1))).out()
 `,
-    true
+  true,
 )}

 - <ic>repeat(amount: number)</ic>: repeat every list elements _n_ times.
@ -245,7 +245,7 @@ ${makeExample(
  `
 beat(.25)::sound('amencutup').n([1,2,3,4,5,6,7,8].repeat(4).beat(.25)).out()
 `,
-    true
+  true,
 )}

 - <ic>loop(index: number)</ic>: loop takes one argument, the _index_. It allows you to iterate over a list using an iterator such as a counter. This is super useful to control how you are accessing values in a list without relying on a temporal method such as <ic>.beat()</ic> or </ic>.bar()</ic>.
@ -255,7 +255,7 @@ ${makeExample(
  `
 beat(1) :: sound('numbers').n([1,2,3,4,5].loop($(3, 10, 2))).out()
 `,
-    true
+  true,
 )}

 - <ic>shuffle(): this</ic>: shuffles a list! Simple enough!
@ -265,7 +265,7 @@ ${makeExample(
  `
 beat(1) :: sound('numbers').n([1,2,3,4,5].shuffle().loop($(1)).out()
 `,
-    true
+  true,
 )}

 - <ic>rotate(steps: number)</ic>: rotate a list to the right _n_ times. The last value become the first, rinse and repeat.
@ -283,7 +283,7 @@ beat(.25) :: snd('sine').fmi([1.99, 2])
    .beat(.25))                   // while the index changes
  .out()
 `,
-    true
+  true,
 )}

 ## Filtering
@ -296,7 +296,7 @@ ${makeExample(
 // Remove unique and 100 will repeat four times!
 beat(1)::snd('sine').sustain(0.1).freq([100,100,100,100,200].unique().beat()).out()
 `,
-    true
+  true,
 )}

 ## Simple math operations
--- a/src/documentation/probabilities.ts
+++ b/src/documentation/probabilities.ts
@ -17,7 +17,7 @@ ${makeExample(
  `
 rhythm(0.125, 10, 16) :: sound('sid').n(4).note(50 + irand(50, 62) % 8).out()
 `,
-    true
+  true,
 )}


@ -32,7 +32,7 @@ prob(50) :: script(1);
 prob(60) :: script(2);
 prob(80) :: script(toss() ? script(3) : script(4))
 `,
-    true
+  true,
 )}

 - <ic>seed(val: number|string)</ic>: sets the seed of the random number generator. You can use a number or a string. The same seed will always return the same sequence of random numbers.
@ -64,7 +64,7 @@ ${makeExample(
  rarely(4) :: sound('bd').out(); // Rarely in 4 beats is bit less
  rarely(8) :: sound('east').out(); // Rarely in 8 beats is even less
  `,
-    true
+  true,
 )}

 ${makeExample(
@ -74,7 +74,7 @@ ${makeExample(
  often() :: beat(0.5) :: sound('hh').out();
  sometimes() :: onbeat(1,3) :: sound('snare').out();
  `,
-    false
+  false,
 )}

 ${makeExample(
@ -91,8 +91,7 @@ ${makeExample(
  .almostNever(n=>n.freq(400))
  .out()
  `,
-    false
+  false,
 )}
-`
-}
-
+`;
+};
--- a/src/documentation/samples/loading_samples.ts
+++ b/src/documentation/samples/loading_samples.ts
@ -18,7 +18,7 @@ ${makeExample(
    sd: ['sd/rytm-01-classic.wav','sd/rytm-00-hard.wav'],
    hh: ['hh27/000_hh27closedhh.wav','hh/000_hh3closedhh.wav'],
  }, 'github:tidalcycles/Dirt-Samples/master/');`,
-    true
+  true,
 )}

 This example is loading two samples from each folder declared in the original repository (in the <ic>strudel.json</ic> file). You can then play with them using the syntax you are already used to:
@ -27,7 +27,7 @@ ${makeExample(
  "Playing with the loaded samples",
  `rhythm(.5, 5, 8)::sound('bd').n(ir(1,2)).end(1).out()
  `,
-    true
+  true,
 )}

 Internally, Topos is loading samples using a different technique where sample maps are directly taken from the previously mentioned <ic>strudel.json</ic> file that lives in each repository:
@ -40,7 +40,7 @@ samples("github:tidalcycles/Dirt-Samples/master");
 samples("github:Bubobubobubobubo/Dough-Samples/main");
 samples("github:Bubobubobubobubo/Dough-Amiga/main");
 `,
-    true
+  true,
 )}

 To learn more about the audio sample loading mechanism, please refer to [this page](https://strudel.tidalcycles.org/learn/samples) written by Felix Roos who has implemented the sample loading mechanism. The API is absolutely identic in Topos!
@ -57,9 +57,10 @@ samples("shabda:ocean")

 // Use the sound without 'shabda:'
 beat(1)::sound('ocean').clip(1).out()
-`, true
+`,
+  true,
 )}

 You can also use the <ic>.n</ic> attribute like usual to load a different sample.
-`
-}
+`;
+};
--- a/src/documentation/samples/sample_banks.ts
+++ b/src/documentation/samples/sample_banks.ts
@ -9,5 +9,5 @@ export const sample_banks = (application: Editor): string => {
 There is a <ic>bank</ic> attribute that can help you to sort audio samples from large collections.

 **AJKPercusyn**, **AkaiLinn**, **AkaiMPC60**, **AkaiXR10**, **AlesisHR16**, **AlesisSR16**, **BossDR110**, **BossDR220**, **BossDR55**, **BossDR550**, **BossDR660**, **CasioRZ1**, **CasioSK1**, **CasioVL1**, **DoepferMS404**, **EmuDrumulator**, **EmuModular**, **EmuSP12**, **KorgDDM110**, **KorgKPR77**, **KorgKR55**, **KorgKRZ**, **KorgM1**, **KorgMinipops**, **KorgPoly800**, **KorgT3**, **Linn9000**, **LinnDrum**, **LinnLM1**, **LinnLM2**, **MFB512**, **MPC1000**, **MoogConcertMateMG1**, **OberheimDMX**, **RhodesPolaris**, **RhythmAce**, **RolandCompurhythm1000**, **RolandCompurhythm78**, **RolandCompurhythm8000**, **RolandD110**, **RolandD70**, **RolandDDR30**, **RolandJD990**, **RolandMC202**, **RolandMC303**, **RolandMT32**, **RolandR8**, **RolandS50**, **RolandSH09**, **RolandSystem100**, **RolandTR505**, **RolandTR606**, **RolandTR626**, **RolandTR707**, **RolandTR727**, **RolandTR808**, **RolandTR909**, **SakataDPM48**, **SequentialCircuitsDrumtracks**, **SequentialCircuitsTom**, **SergeModular**, **SimmonsSDS400**, **SimmonsSDS5**, **SoundmastersR88**, **UnivoxMicroRhythmer12**, **ViscoSpaceDrum**, **XdrumLM8953**, **YamahaRM50**, **YamahaRX21**, **YamahaRX5**, **YamahaRY30**, **YamahaTG33**.
-`
-}
+`;
+};
--- a/src/documentation/samples/sample_list.ts
+++ b/src/documentation/samples/sample_list.ts
@ -1,7 +1,10 @@
 import { type Editor } from "../../main";
 import { makeExampleFactory } from "../../Documentation";

-export const samples_to_markdown = (application: Editor, tag_filter?: string) => {
+export const samples_to_markdown = (
+  application: Editor,
+  tag_filter?: string,
+) => {
  let samples = application.api._all_samples();
  let markdownList = "";
  let keys = Object.keys(samples);
@ -44,13 +47,11 @@ export const injectAllSamples = (application: Editor): string => {
  return generatedPage;
 };

-
 export const injectDrumMachineSamples = (application: Editor): string => {
  let generatedPage = samples_to_markdown(application, "Machines");
  return generatedPage;
 };

-
 export const sample_list = (application: Editor): string => {
  // @ts-ignore
  const makeExample = makeExampleFactory(application);
@ -63,9 +64,13 @@ On this page, you will find an exhaustive list of all the samples currently load

 A very large collection of wavetables for wavetable synthesis. This collection has been released by Kristoffer Ekstrand: [AKWF Waveforms](https://www.adventurekid.se/akrt/waveforms/adventure-kid-waveforms/). Every sound sample that starts with <ic>wt_</ic> will be looped. Look at this demo:

-${makeExample("Wavetable synthesis made easy :)", `
+${makeExample(
+  "Wavetable synthesis made easy :)",
+  `
 beat(0.5)::sound('wt_stereo').n([0, 1].pick()).ad(0, .25).out()
-`, true)}
+`,
+  true,
+)}


 Pick one folder and spend some time exploring it. There is a lot of different waveforms.
@ -79,9 +84,12 @@ ${samples_to_markdown(application, "Waveforms")}
 A set of 72 classic drum machines created by **Geikha**: [Geikha Drum Machines](https://github.com/geikha/tidal-drum-machines). To use them efficiently, it is best to use the <ic>.bank()</ic> parameter like so:

 ${makeExample(
-    "Using a classic drum machine", `
+  "Using a classic drum machine",
+  `
 beat(0.5)::sound(['bd', 'cp'].pick()).bank("AkaiLinn").out()
-`, true)}
+`,
+  true,
+)}

 Here is the complete list of available machines:

@ -111,9 +119,11 @@ ${samples_to_markdown(application, "Amiga")}
 A collection of many different amen breaks. Use <ic>.stretch()</ic> to play with these:

 ${makeExample(
-      "Stretching an amen break", `
+  "Stretching an amen break",
+  `
 beat(4)::sound('amen1').stretch(4).out()
-`, true,
+`,
+  true,
 )}

 The stretch should be adapted based on the length of each amen break.
@ -130,5 +140,5 @@ Many live coders are expecting to find the Tidal sample library wherever they go
 <div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-neutral-600 mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
 ${samples_to_markdown(application, "Tidal")}
 </div>
-`
-}
+`;
+};
--- a/src/documentation/synths.ts
+++ b/src/documentation/synths.ts
@ -17,7 +17,7 @@ ${makeExample(
  `
 beat(.5) && snd(['sine', 'triangle', 'sawtooth', 'square'].beat()).freq(100).out()
 `,
-    true
+  true,
 )}

 Note that you can also use noise if you do not want to use a periodic oscillator:
@ -28,7 +28,7 @@ ${makeExample(
  `
 beat(.5) && snd(['brown', 'pink', 'white'].beat()).adsr(0,.1,0,0).out()
 `,
-    true
+  true,
 )}

 Two functions are primarily used to control the frequency of the synthesizer:
@ -40,7 +40,7 @@ ${makeExample(
  `
 beat(.5) && snd('triangle').freq([100,200,400].beat(2)).out()
 `,
-    true
+  true,
 )}

  ${makeExample(
@ -48,7 +48,7 @@ beat(.5) && snd('triangle').freq([100,200,400].beat(2)).out()
    `
 beat(.5) && snd('triangle').note([60,"F4"].pick()).out()
 `,
-    true
+    true,
  )}

 Chords can also played using different parameters:
@ -60,7 +60,7 @@ ${makeExample(
  `
    beat(1) && snd('triangle').chord(["C","Em7","Fmaj7","Emin"].beat(2)).adsr(0,.2).out()
 `,
-    true
+  true,
 )}  

 ${makeExample(
@ -68,7 +68,7 @@ ${makeExample(
  `
    beat(.5) && snd('triangle').chord(60,64,67,72).invert([1,-3,4,-5].pick()).adsr(0,.2).out()
 `,
-    true
+  true,
 )}  

 ## Vibrato
@ -84,7 +84,7 @@ beat(1) :: sound('triangle')
  .vib([1/2, 1, 2, 4].beat())
  .vibmod([1,2,4,8].beat(2))
  .out()`,
-    true
+  true,
 )}

 ## Noise
@ -101,7 +101,7 @@ beat(1) :: sound('triangle')
  .vib([1/2, 1, 2, 4].beat())
  .vibmod([1,2,4,8].beat(2))
  .out()`,
-    true
+  true,
 )}


@ -114,13 +114,13 @@ Controlling the amplitude and duration of the sound can be done using various te
 ${makeExample(
  "Setting the gain",
  `beat(0.25) :: sound('sawtooth').gain([0.0, 1/8, 1/4, 1/2, 1].beat(0.5)).out()`,
-    true
+  true,
 )}

 ${makeExample(
  "Setting the velocity",
  `beat(0.25) :: sound('sawtooth').velocity([0.0, 1/8, 1/4, 1/2, 1].beat(0.5)).out()`,
-    true
+  true,
 )}

 <div class="mt-4 mb-4 lg:grid lg:grid-cols-4 lg:gap-4">
@ -141,7 +141,7 @@ beat(0.5) :: sound('wt_piano')
  .freq(100).decay(.2)
  .sustain([0.1,0.5].beat(4))
  .out()`,
-    true
+  true,
 )}

 This ADSR envelope design is important to know because it is used for other aspects of the synthesis engine such as the filters that we are now going to talk about. But wait, I've kept the best for the end. The <ic>adsr()</ic> combines all the parameters together. It is a shortcut for setting the ADSR envelope:
@ -157,7 +157,7 @@ beat(0.5) :: sound('wt_piano')
  .adsr(0, .2, [0.1,0.5].beat(4), 0)
  .out()
 `,
-    true
+  true,
 )}

 - <ic>ad(attack: number, decay: number)</ic>: sets the attack and decay phases, setting sustain and release to <ic>0</ic>.
@ -171,7 +171,7 @@ beat(0.5) :: sound('wt_piano')
  .ad(0, .2)
  .out()
 `,
-    true
+  true,
 )}

 ## Substractive synthesis using filters
@ -185,7 +185,7 @@ The most basic synthesis technique used since the 1970s is called substractive s
 ${makeExample(
  "Filtering the high frequencies of an oscillator",
  `beat(.5) :: sound('sawtooth').cutoff(50 + usine(1/8) * 2000).out()`,
-    true
+  true,
 )}

 These filters all come with their own set of parameters. Note that we are describing the parameters of the three different filter types here. Choose the right parameters depending on the filter type you are using:
@ -201,7 +201,7 @@ These filters all come with their own set of parameters. Note that we are descri
 ${makeExample(
  "Filtering a bass",
  `beat(.5) :: sound('jvbass').lpf([250,1000,8000].beat()).out()`,
-    true
+  true,
 )}

 ### Highpass filter
@ -214,7 +214,7 @@ ${makeExample(
 ${makeExample(
  "Filtering a noise source",
  `beat(.5) :: sound('gtr').hpf([250,1000, 2000, 3000, 4000].beat()).end(0.5).out()`,
-    true
+  true,
 )}

 ### Bandpass filter
@ -227,7 +227,7 @@ ${makeExample(
 ${makeExample(
  "Sweeping the filter on the same guitar sample",
  `beat(.5) :: sound('gtr').bandf(100 + usine(1/8) * 4000).end(0.5).out()`,
-    true
+  true,
 )}

 Alternatively, <ic>lpf</ic>, <ic>hpf</ic> and <ic>bpf</ic> can take a second argument, the **resonance**.
@ -241,7 +241,7 @@ You can also use the <ic>ftype</ic> method to change the filter type (order). Th
 ${makeExample(
  "Filtering a bass",
  `beat(.5) :: sound('jvbass').ftype(['12db', '24db'].beat(4)).lpf([250,1000,8000].beat()).out()`,
-    true
+  true,
 )}

 I also encourage you to study these simple examples to get more familiar with the construction of basic substractive synthesizers:
@ -254,7 +254,7 @@ beat(.5) && snd('sawtooth')
  .resonance(0.2).freq([100,150].pick())
  .out()
 	`,
-    true
+  true,
 )}

 ${makeExample(
@ -265,7 +265,7 @@ beat(.5) :: [100,101].forEach((freq) => sound('square').freq(freq*2).sustain(0.0
 beat([.5, .75, 2].beat()) :: [100,101].forEach((freq) => sound('square')
  .freq(freq*4 + usquare(2) * 200).sustain(0.125).out())
 beat(.25) :: sound('square').freq(100*[1,2,4,8].beat()).sustain(0.1).out()`,
-    false
+  false,
 )}

 ${makeExample(
@ -279,7 +279,7 @@ beat(1/8)::sound('sine')
  .freq(mouseX())
 	.gain(0.25)
  .out()`,
-    false
+  false,
 )}

 ## Filter envelopes
@ -303,7 +303,7 @@ ${makeExample(
  `beat(.5) :: sound('sawtooth').note([48,60].beat())
  .cutoff(5000).lpa([0.05, 0.25, 0.5].beat(2))
  .lpenv(-8).lpq(10).out()`,
-    true
+  true,
 )}

 ### Highpass envelope
@ -323,7 +323,7 @@ ${makeExample(
  `beat(.5) :: sound('sawtooth').note([48,60].beat())
  .hcutoff(1000).hpa([0.05, 0.25, 0.5].beat(2))
  .hpenv(8).hpq(10).out()`,
-    true
+  true,
 )}

 ### Bandpass envelope
@ -345,7 +345,7 @@ ${makeExample(
  .bpa([0.25, 0.125, 0.5].beat(2) * 4)
  .bpenv(-4).release(2).out()
  `,
-    true
+  true,
 )}


@ -363,7 +363,7 @@ beat(.25) :: sound('wt_symetric:8').note([50,55,57,60].beat(.25) - [12,0]
 beat(1) :: sound('kick').n(4).out()
 beat(2) :: sound('snare').out()
 beat(.5) :: sound('hh').out()`,
-    true
+  true,
 )}
 	

@ -381,7 +381,7 @@ beat(2) :: v('selec', irand(1, 100))
 beat(2) :: v('swave', collection.pick())
 beat(0.5) :: sound(v('swave')).n(v('selec')).out()
 `,
-    true
+  true,
 )}

 You can work with them just like with any other waveform. Having so many of them makes them also very useful for generating sound effects, percussive, sounds, etc...
@ -407,7 +407,7 @@ beat(.25) && snd('triangle').adsr(0.02, 0.1, 0.1, 0.1)
  .pan(noise()).note([60,55, 60, 63].beat() + [0, 7].pick()).out()
 beat(2) :: sound('cp').room(1).sz(1).out()
 	`,
-    true
+  true,
 )}

 ${makeExample(
@ -418,7 +418,7 @@ beat([4].bar()) :: sound('sine').fm('5.2183:4.5').sustain(0.05).out()
 beat(.5) :: sound('sine')
  .fmh([1, 1.75].beat())
  .fmi($(1) % 30).orbit(2).room(0.5).out()`,
-    true
+  true,
 )}

 ${makeExample(
@ -432,7 +432,7 @@ beat(0.25) :: sound('sine')
  .cutoff(1500).delay(0.5).delayt(0.125)
  .delayfb(0.8).fmh(Math.floor(usine(.5) * 4))
  .out()`,
-    true
+  true,
 )}

 **Note:** you can also set the _modulation index_ and the _harmonic ratio_ with the <ic>fm</ic> argument. You will have to feed both as a string: <ic>fm('2:4')</ic>. If you only feed one number, only the _modulation index_ will be updated.
@ -453,7 +453,7 @@ beat(.5) :: sound('sine')
  .fmwave('triangle')
  .fmsus(0).fmdec(0.2).out()
  `,
-    true
+  true,
 )}

 ## ZzFX
@ -467,7 +467,7 @@ ${makeExample(
  `
 beat(.5) :: sound(['z_sine', 'z_triangle', 'z_sawtooth', 'z_tan', 'z_noise'].beat()).out()
 `,
-    true
+  true,
 )}
 ${makeExample(
  "Minimalist chiptune",
@ -481,7 +481,7 @@ beat(.5) :: sound('z_triangle')
  .room(0.5).size(0.9)
  .pitchJumpTime(0.01).out() 
 `,
-    true
+  true,
 )}

 It comes with a set of parameters that can be used to tweak the sound. Don't underestimate this synth! It is very powerful for generating anything ranging from chaotic noise sources to lush pads:
@ -519,7 +519,7 @@ beat(.25) :: sound('z_tan')
  .sustain(0).decay([0.2, 0.1].pick())
  .out() 
 `,
-    true
+  true,
 )}
 ${makeExample(
  "What is happening to me?",
@ -529,7 +529,7 @@ beat(1) :: snd('zzfx').zzfx([
  [1.12,,97,.11,.16,.01,4,.77,,,30,.17,,,-1.9,,.01,.67,.2]
  ].beat()).out()
 `,
-    false
+  false,
 )}
 ${makeExample(
  "Les voitures dans le futur",
@ -541,7 +541,7 @@ beat(1) :: sound(['z_triangle', 'z_sine'].pick())
  .room(0.9).size(0.9)
  .delayt(0.75).delayfb(0.5).out()
 `,
-    false
+  false,
 )}

 Note that you can also design sounds [on this website](https://killedbyapixel.github.io/ZzFX/) and copy the generated code in Topos. To do so, please use the <ic>zzfx</ic> method with the generated array:
@ -551,7 +551,7 @@ ${makeExample(
 
 beat(2) :: sound('zzfx').zzfx([3.62,,452,.16,.1,.21,,2.5,,,403,.05,.29,,,,.17,.34,.22,.68]).out()
 `,
-    true
+  true,
 )}

 # Speech synthesis
@ -571,7 +571,7 @@ ${makeExample(
  `
 beat(4) :: speak("Hello world!")
  `,
-    true
+  true,
 )}

 ${makeExample(
@ -579,7 +579,7 @@ ${makeExample(
  `
 beat(2) :: speak("Topos!","fr",irand(0,5))
  `,
-    true
+  true,
 )}


@ -590,7 +590,7 @@ ${makeExample(
  `
  onbeat(4) :: "Foobaba".voice(irand(0,10)).speak()
  `,
-    true
+  true,
 )}

 ${makeExample(
@ -603,7 +603,7 @@ ${makeExample(
    
  beat(6) :: sentence.pitch(0).rate(0).voice([0,2].pick()).speak()
  `,
-    true
+  true,
 )}

 ${makeExample(
@ -623,7 +623,7 @@ ${makeExample(
      .rate(rand(.4,.6))
      .speak();
  `,
-    true
+  true,
 )}
 `;
 };
--- a/src/documentation/time/cyclical_time.ts
+++ b/src/documentation/time/cyclical_time.ts
@ -21,7 +21,7 @@ ${makeExample(
 // This code is alternating between different mod values
 beat([1,1/2,1/4,1/8].beat(2)) :: sound('hat').n(0).out()
 `,
-    true
+  true,
 )}

 ${makeExample(
@ -41,7 +41,7 @@ beat(1/3) :: blip(400).pan(r(0,1)).out();
 flip(3) :: beat(1/6) :: blip(800).pan(r(0,1)).out();
 beat([1,0.75].beat(2)) :: blip([50, 100].beat(2)).pan(r(0,1)).out();
 `,
-    false
+  false,
 )}

 ${makeExample(
@ -49,7 +49,7 @@ ${makeExample(
  `
 beat([.5, 1.25])::sound('hat').out()
 `,
-    false
+  false,
 )}

 - <ic>pulse(n: number | number[] = 1, offset: number = 1)</ic>: return true every _n_ pulses. A pulse is the tiniest possible rhythmic value.
@ -63,7 +63,7 @@ ${makeExample(
 pulse([24, 16])::sound('hat').ad(0, .02).out()
 pulse([48, [36,24].dur(4, 1)])::sound('fhardkick').ad(0, .1).out()
 `,
-    true
+  true,
 )}
 ${makeExample(
  "pulse is the OG rhythmic function in Topos",
@ -71,7 +71,7 @@ ${makeExample(
 pulse([48, 24, 16].beat(4)) :: sound('linnhats').out()
 beat(1)::snd(['bd', '808oh'].beat(1)).out()
 `,
-    false
+  false,
 )}


@ -85,7 +85,7 @@ ${makeExample(
 bar(1)::sound('kick').out()
 beat(1)::sound('hat').speed(2).out()
 `,
-    true
+  true,
 )}


@ -97,7 +97,7 @@ beat(1)::sound('hat').speed(2).out()
 beat(1, 0.5)::sound('hat').speed(4).out()
 bar(1, 0.5)::sound('sn').out()
 `,
-    false
+  false,
 )}

 - <ic>onbeat(...n: number[])</ic>: The <ic>onbeat</ic> function allows you to lock on to a specific beat from the clock to execute code. It can accept multiple arguments. It's usage is very straightforward and not hard to understand. You can pass either integers or floating point numbers. By default, topos is using a <ic>4/4</ic> bar meaning that you can target any of these beats (or in-between) with this function.
@ -109,7 +109,7 @@ onbeat(1,2,3,4)::snd('kick').out() // Bassdrum on each beat
 onbeat(2,4)::snd('snare').n([8,4].beat(4)).out() // Snare on acccentuated beats
 onbeat(1.5,2.5,3.5, 3.75)::snd('hat').gain(r(0.9,1.1)).out() // Cool high-hats
 `,
-    true
+  true,
 )}

 ## XOX Style sequencers
@ -125,7 +125,7 @@ seq('xoxo')::sound('fhardkick').out()
 seq('ooxo')::sound('fsoftsnare').out()
 seq('xoxo', 0.25)::sound('fhh').out()
  `,
-    true
+  true,
 )}

 ${makeExample(
@ -135,7 +135,7 @@ seq('xoxooxxoo', [0.5, 0.25].dur(2, 1))::sound('fhardkick').out()
 seq('ooxo', [1, 2].bar())::sound('fsoftsnare').speed(0.5).out()
 seq(['xoxoxoxx', 'xxoo'].bar())::sound('fhh').out()
  `,
-    true
+  true,
 )}

 - <ic>fullseq(expr: string, duration: number = 0.5): boolean</ic> : a variant. Will return <ic>true</ic> or <ic>false</ic> for a whole period, depending on the symbol. Useful for long structure patterns.
@ -159,7 +159,7 @@ function complexPat() {
 }
 fullseq('xooxooxx', 4) ? simplePat() : complexPat()
  `,
-    true
+  true,
 )}


@ -181,7 +181,7 @@ rhythm(.5, 7, 8)::sound('sine')
  .freq(125).ad(0, .2).out()
 rhythm(.5, 3, 8)::sound('sine').freq(500).ad(0, .5).out()
 `,
-    true
+  true,
 )}


@ -194,7 +194,7 @@ ${makeExample(
  oneuclid(5, 9) :: snd('kick').out()
  oneuclid(7,16) :: snd('east').end(0.5).n(irand(3,5)).out()
 `,
-    true
+  true,
 )}

 - <ic>bin(iterator: number, n: number): boolean</ic>: a binary rhythm generator. It transforms the given number into its binary representation (_e.g_ <ic>34</ic> becomes <ic>100010</ic>). It then returns a boolean value based on the iterator in order to generate a rhythm.
@ -207,7 +207,7 @@ bpm(135);
 beat(.5) && bin($(1), 12) && snd('kick').n([4,9].beat(1.5)).out()
 beat(.5) && bin($(2), 34) && snd('snare').n([3,5].beat(1)).out()
 `,
-    true
+  true,
 )}

 ${makeExample(
@ -221,7 +221,7 @@ binrhythm([.5, .25].beat(1), 30) && snd('wt_granular').n(a)
  .adsr(0, r(.1, .4), 0, 0).freq([50, 60, 72].beat(4))
  .room(1).size(1).out()
 `,
-    true
+  true,
 )}

 ${makeExample(
@ -233,7 +233,7 @@ beat(.5) && bin($(1), 911) && snd('ST69').n([2,3,4].beat())
  .room(1).size(1).out()
 beat(.5) && sound('amencutup').n(irand(2,7)).shape(0.3).out() 
 `,
-    false
+  false,
 )}
 	
 If you don't find it spicy enough, you can add some more probabilities to your rhythms by taking advantage of the probability functions. See the functions documentation page to learn more about them. 
@ -247,7 +247,7 @@ prob(60)::beat(.5) && euclid($(2), 3, 8) && snd('mash')
  .pan(usine(1/4)).out()
 prob(80)::beat(.5) && sound(['hh', 'hat'].pick()).out()
 `,
-    true
+  true,
 )}


--- a/src/documentation/time/linear_time.ts
+++ b/src/documentation/time/linear_time.ts
@ -26,7 +26,7 @@ ${makeExample(
  `
 log(\`\$\{cbar()}\, \$\{cbeat()\}, \$\{cpulse()\}\`)
  `,
-    true
+  true,
 )}

 ### BPM and PPQN
@ -83,7 +83,7 @@ if((cbar() % 4) > 1) {
 // This is always playing no matter what happens
 beat([.5, .5, 1, .25].beat(0.5)) :: sound('shaker').out() 
 `,
-    true
+  true,
 )}

 ## Time Warping
@ -108,7 +108,7 @@ flip(3) :: beat([.25,.5].beat(.5)) :: sound('dr')
 // Jumping back and forth in time
 beat(.25) :: warp([12, 48, 24, 1, 120, 30].pick())
 `,
-    true
+  true,
 )}
 	
 - <ic>beat_warp(beat: number)</ic>: this function jumps to the _n_ beat of the clock. The first beat is <ic>1</ic>.
@ -130,7 +130,7 @@ beat(.5) :: snd('arpy').note(
 // Comment me to stop warping!
 beat(1) :: beat_warp([2,4,5,10,11].pick())
 `,
-    true
+  true,
 )}

 ## Transport-based rhythm generators
@ -144,7 +144,7 @@ onbeat(1,2,3,4)::snd('kick').out() // Bassdrum on each beat
 onbeat(2,4)::snd('snare').n([8,4].beat(4)).out() // Snare on acccentuated beats
 onbeat(1.5,2.5,3.5, 3.75)::snd('hat').gain(r(0.9,1.1)).out() // Cool high-hats
 `,
-    true
+  true,
 )}

 ${makeExample(
@ -156,7 +156,7 @@ beat([.25, 1/8].beat(1.5))::snd('hat').n(2)
  .gain(rand(0.4, 0.7)).end(0.05)
  .pan(usine()).out()
 `,
-    false
+  false,
 )}

 - <ic>oncount(beats: number[], meter: number)</ic>: This function is similar to <ic>onbeat</ic> but it allows you to specify a custom number of beats as the last argument.
@ -171,7 +171,7 @@ z1('1/16 (0 2 3 4)+(0 2 4 6)').scale('pentatonic').sound('sawtooth')
 onbeat(1,1.5,2,3,4) :: sound('bd').gain(2.0).out()
 oncount([1,3,5.5,7,7.5,8],8) :: sound('hh').gain(irand(1.0,4.0)).out()
 `,
-    true
+  true,
 )}

 ${makeExample(
@ -183,7 +183,7 @@ oncount([5, 6, 13],16) :: sound('shaker').room(0.25).gain(0.9).out()
 oncount([2, 3, 3.5, 6, 7, 10, 15],16) :: sound('hh').n(8).gain(0.8).out()
 oncount([1, 4, 5, 8, 9, 10, 11, 12, 13, 14, 15, 16],16) :: sound('hh').out()
 `,
-    true
+  true,
 )}


--- a/src/documentation/variables.ts
+++ b/src/documentation/variables.ts
@ -22,7 +22,7 @@ ${makeExample(
  `
 v('my_cool_variable', 2)
 `,
-    true
+  true,
 )}

 ${makeExample(
@ -31,7 +31,7 @@ ${makeExample(
 // Note that we just use one argument
 log(v('my_cool_variable'))
 `,
-    false
+  false,
 )}


@ -55,7 +55,7 @@ ${makeExample(
  `
 rhythm(.25, 6, 8) :: sound('dr').n($(1)).end(.25).out()
 `,
-    true
+  true,
 )}

 ${makeExample(
@ -64,7 +64,7 @@ ${makeExample(
 // Limit is 20, step is 5
 rhythm(.25, 6, 8) :: sound('dr').n($(1, 20, 5)).end(.25).out()
 `,
-    false
+  false,
 )}

 ${makeExample(
@ -73,10 +73,10 @@ ${makeExample(
 // Limit is 20, step is 5
 rhythm(.25, 6, 8) :: sound('dr').n(drunk()).end(.25).out()
 `,
-    false
+  false,
 )}



-`
-}
+`;
+};
--- a/src/documentation/ziffers.ts
+++ b/src/documentation/ziffers.ts
@ -12,7 +12,9 @@ Ziffers is a **musical number based notation** tuned for _live coding_. It is a
 - exploring **generative / aleatoric / stochastic** melodies and applying them to sounds and synths.
 - embracing a different mindset and approach to time and **patterning**.

-${makeExample("Super Fancy Ziffers example", `
+${makeExample(
+  "Super Fancy Ziffers example",
+  `
 z1('1/8 024!3 035 024 0124').sound('wt_stereo')
  .adsr(0, .4, 0.5, .4).gain(0.1)
  .lpadsr(4, 0, .2, 0, 0)
@ -26,7 +28,9 @@ z2('<1/8 1/16> __ 0 <(^) (^ ^)> (0,8)').sound('wt_stereo')
 let osci = 1500 + usine(1/2) * 2000;
 z3('can can:2').sound().gain(1).cutoff(osci).out()
 z4('1/4 kick kick snare kick').sound().gain(1).cutoff(osci).out()
-`, true)}
+`,
+  true,
+)}

 ## Notation

@ -53,7 +57,7 @@ ${makeExample(
  `
 z1('0.25 0 1 2 3 4 5 6 7 8 9').sound('wt_stereo')
  .adsr(0, .1, 0, 0).out()`,
-    true
+  true,
 )}

 ${makeExample(
@ -62,7 +66,7 @@ ${makeExample(
  .sound('wt_05').pan(r(0,1))
  .cutoff(usaw(1/2) * 4000)
  .room(0.9).size(0.9).out()`,
-    false
+  false,
 )}

 ${makeExample(
@ -72,7 +76,7 @@ z1('1/8 0 2 4 0 2 4 1/4 0 3 5 0.25 _ 0 7 0 7')
  .sound('square').delay(0.5).delayt(1/8)
  .adsr(0, .1, 0, 0).delayfb(0.45).out()
 `,
-    false
+  false,
 )}

 ${makeExample(
@ -82,7 +86,7 @@ z1('e _ _ 0 ^ 0 _ 0 ^ 0').sound('jvbass').out()
 beat(1)::snd('bd').out(); beat(2)::snd('sd').out()
 beat(3) :: snd('cp').room(0.5).size(0.5).orbit(2).out()
 `,
-    false
+  false,
 )}

 ${makeExample(
@ -94,7 +98,7 @@ z1('^ 1/8 0 1 b2 3 4 _ 4 b5 4 3 b2 1 0')
  .fmi(0.5).fmh(2).delay(0.5).delayt(1/3)
  .adsr(0, .1, 0, 0).out()
 `,
-    false
+  false,
 )}

 ${makeExample(
@ -107,7 +111,7 @@ z2('1/8 _ 0!4 5!4 4!2 7!2')
  .scale('major').sound('wt_oboe')
  .shape(0.2).sustain(0.1).out()
 `,
-    false
+  false,
 )}

 ${makeExample(
@ -117,7 +121,7 @@ z1('w [0 [5 [3 7]]] h [0 4]')
  .scale('major').sound('sine')
  .fmi(usine(.5)).fmh(2).out()
 `,
-    false
+  false,
 )}

 ## Chords
@ -131,7 +135,7 @@ z1('1.0 024 045 058 046 014')
  .sound('sine').adsr(0.5, 1, 0, 0)
  .room(0.5).size(0.9)
  .scale("minor").out()
-`
+`,
 )}

 ${makeExample(
@ -140,7 +144,7 @@ ${makeExample(
 z1('2/4 i vi ii v')
  .sound('triangle').adsr(0.2, 0.3, 0, 0)
  .room(0.5).size(0.9).scale("major").out()
-`
+`,
 )}

 ${makeExample(
@ -150,7 +154,7 @@ z1('0.25 Bmaj7!2 D7!2 _ Gmaj7!2 Bb7!2 ^ Ebmaj7!2')
  .sound('square').room(0.5).cutoff(500)
  .lpadsr(4, 0, .4, 0, 0).size(0.9)
  .scale("major").out()
-`
+`,
 )}

 ${makeExample(
@ -158,7 +162,7 @@ ${makeExample(
  `
 z1('q Amin!2').key(["A2", "E2"].beat(4))
  .sound('sawtooth').cutoff(500)
-  .lpadsr(2, 0, .5, 0, 0, 0).out()`
+  .lpadsr(2, 0, .5, 0, 0, 0).out()`,
 )}

 ${makeExample(
@ -169,7 +173,7 @@ z1('i i v%-4 v%-2 vi%-5 vi%-3 iv%-2 iv%-1')
  .delay(0.5).delayt([1/8, 1/4].beat(4))
  .delayfb(0.5).out()
 beat(4) :: sound('breaks165').stretch(4).out()
-`
+`,
 )}

 ${makeExample(
@ -178,7 +182,7 @@ ${makeExample(
 z1('1/4 Cmin!3 Fmin!3 Fmin%-1 Fmin%-2 Fmin%-1')
  .sound("sine").bpf(500 + usine(1/4) * 2000)
  .out()
-`
+`,
 )}

 ${makeExample(
@ -187,7 +191,7 @@ ${makeExample(
 z1('1/6 i v 1/3 vi iv').invert([1,-1,-2,0].beat(4))
  .sound("sawtooth").cutoff(1000)
  .lpadsr(2, 0, .2, 0, 0).out()
-  `
+  `,
 )}

 ## Algorithmic operations
@ -204,7 +208,7 @@ z1("1/8 _ 0 (0 1 3)+(1 2) 0 (2 3 5)-(1 2)").sound('sine')
  .room(0.9).size(0.9).sustain(0.1).delay(0.5).delay(0.125)
  .delayfb(0.25).out();
 `,
-    true
+  true,
 )}

 * **Random numbers:** <ic>(4,6)</ic> Random number between 4 and 6
@ -219,7 +223,7 @@ z1("s _ (0,8) 0 0 (0,5) 0 0").sound('sine')
  .delay(0.125).delayfb(0.25).out();
 beat(.5) :: snd(['kick', 'hat'].beat(.5)).out()
 `,
-    true
+  true,
 )}

 ## Keys and scales
@ -249,7 +253,7 @@ z1("s (0,8) 0 0 (0,5) 0 0").sound('sine')
 	.delay(0.125).delayfb(0.25).out();
 beat(.5) :: snd(['kick', 'hat'].beat(.5)).out()
 `,
-    true
+  true,
 )}


@ -282,7 +286,7 @@ z1("s (0,8) 0 0 (0,5) 0 0").sound('sine')
 	.delay(0.25).delayfb(0.5).out();
 beat(1, 1.75) :: snd(['kick', 'hat'].beat(1)).out()
 `,
-    true
+  true,
 )}

 Microtonal scales can be defined using <a href="https://www.huygens-fokker.org/scala/scl_format.html" target="_blank">Scala format</a> or by extended notation defined by Sevish <a href="https://sevish.com/scaleworkshop/" target="_blank">Scale workshop</a>, for example:
@ -300,7 +304,7 @@ z1("s ^ (0,8) 0 0 _ (0,5) 0 0").sound('sine')
 	.delay(0.25).delayfb(0.5).out();
 beat(1, 1.75) :: snd(['kick', 'hat'].beat(1)).out()
 `,
-    true
+  true,
 )}

 ## Synchronization
@ -315,7 +319,7 @@ ${makeExample(
 z0('w 0 8').sound('peri').out()
 z1('e 0 4 5 9').sound('bell').out()
 `,
-    true
+  true,
 )}

 ${makeExample(
@ -324,7 +328,7 @@ ${makeExample(
 z1('w 0 5').sound('pluck').release(0.1).sustain(0.25).out()
 z2('q 6 3').wait(z1).sound('sine').release(0.16).sustain(0.55).out()
 `,
-    true
+  true,
 )}

 ${makeExample(
@ -333,7 +337,7 @@ ${makeExample(
  z1('w __ 0 5 9 3').sound('bin').out()
  z2('q __ 4 2 e 6 3 q 6').sync(z1).sound('east').out()
 `,
-    true
+  true,
 )}

 ## Examples
@ -346,7 +350,7 @@ ${makeExample(
 z1('0 1 2 3').key('G3')
  .scale('minor').sound('sine').out()
 `,
-    true
+  true,
 )}

 ${makeExample(
@ -354,7 +358,7 @@ ${makeExample(
  `
 z1('0 1 2 3 4').key('G3').scale('minor').sound('sine').often(n => n.pitch+=3).rarely(s => s.delay(0.5)).out()
 `,
-    true
+  true,
 )}

 ${makeExample(
@ -362,7 +366,7 @@ ${makeExample(
  `
 z1('0 3 2 4',{key: 'D3', scale: 'minor pentatonic'}).sound('sine').out()
 `,
-    true
+  true,
 )}

 ${makeExample(
@ -370,7 +374,7 @@ ${makeExample(
  `
  z1('q 0 0 4 4 5 5 h4 q 3 3 2 2 1 1 h0').sound('sine').out()
 `,
-    true
+  true,
 )}

 ${makeExample(
@ -379,7 +383,7 @@ ${makeExample(
  z1('1/4 0 0 4 4 5 5 2/4 4 1/4 3 3 2 2 1 1 2/4 0')
  .sound('sine').out()
 `,
-    true
+  true,
 )}

 ${makeExample(
@ -388,7 +392,7 @@ ${makeExample(
 z1('0.25 5 1 2 6 0.125 3 8 0.5 4 1.0 0')
 .sound('sine').scale("galian").out()
 `,
-    true
+  true,
 )}

 ${makeExample(
@ -397,7 +401,7 @@ ${makeExample(
 z1('q 0 ^ e0 r _ 0 _ r 4 ^4 4')
 .sound('sine').scale("godian").out()
 `,
-    true
+  true,
 )}

 ${makeExample(
@ -406,7 +410,7 @@ ${makeExample(
 z1('q 0 4 e^r 3 e3 0.5^r h4 1/4^r e 5 r 0.125^r 0')
 .sound('sine').scale("aeryptian").out()
 `,
- true
+  true,
 )}

 - Scales
@ -419,7 +423,7 @@ z1('q 0 3 {10 14} e 8 4 {5 10 12 14 7 0}').sound('sine')
 .scale("17/16 9/8 6/5 5/4 4/3 11/8 3/2 13/8 5/3 7/4 15/8 2/1")
 .out()
 `,
-    true
+  true,
 )}

 ${makeExample(
@ -437,7 +441,7 @@ ${makeExample(
  
  onbeat(1,1.5,3) :: sound('bd').cutoff(100 + usine(.25) * 1000).out()
 `,
-    true
+  true,
 )}

 - Algorithmic operations
@ -449,7 +453,7 @@ z1('q 0 (2,4) 4 (5,9)').sound('sine')
 .scale("Bebop minor")
 .out()
 `,
-    true
+  true,
 )}

 ${makeExample(
@ -459,7 +463,7 @@ z1('q (0 3 1 5)+(2 5) e (0 5 2)*(2 3) (0 5 2)>>(2 3) (0 5 2)%(2 3)').sound('sine
 .scale("Bebop major")
 .out()
 `,
-    true
+  true,
 )}

 ## Samples
@ -471,7 +475,7 @@ ${makeExample(
  `
  z1('bd [hh hh]').octave(-2).sound('sine').out()
  `,
-    true
+  true,
 )}

 ${makeExample(
@ -479,7 +483,7 @@ ${makeExample(
  `
  z1('bd [hh <hh <cp cp:2>>]').octave(-2).sound('sine').out()
  `,
-    true
+  true,
 )}

 ${makeExample(
@ -489,7 +493,7 @@ ${makeExample(
    .octave(-1).sound()
    .adsr(0.25,0.125,0.125,0.25).out()
  `,
-    true
+  true,
 )}

 ${makeExample(
@ -500,7 +504,7 @@ ${makeExample(
  .scale('110 220 320 450')
  .sound().out()
  `,
-    true
+  true,
 )}

 ${makeExample(
@ -510,7 +514,7 @@ ${makeExample(
    .octave(-1).sound()
    .adsr(0.25,0.125,0.125,0.25).out()
  `,
-    true
+  true,
 )}

 ${makeExample(
@ -519,7 +523,7 @@ ${makeExample(
  z1('e 1:2 4:3 6:2')
  .octave(-1).sound("east").out()
  `,
-    true
+  true,
 )}

 ${makeExample(
@ -527,7 +531,7 @@ ${makeExample(
  `
 z1('_e 1@east:2 4@bd:3 6@arp:2 9@baa').sound().out()
 `,
-    true
+  true,
 )}


@ -543,7 +547,7 @@ ${makeExample(
  "q 2 7 8 6".z1().octave(-1).sound('sine').out()
  "q 2 7 8 6".z2({key: "C2", scale: "aeolian"}).sound('sine').scale("minor").out()
 `,
-    true
+  true,
 )}  

 `;
--- a/src/extensions/ArrayExtensions.ts
+++ b/src/extensions/ArrayExtensions.ts
@ -141,7 +141,7 @@ export const makeArrayExtensions = (api: UserAPI) => {
    }
    return Array.from(
      { length: times },
-      () => Math.floor(api.randomGen() * (max - min + 1)) + min
+      () => Math.floor(api.randomGen() * (max - min + 1)) + min,
    );
  };

@ -164,7 +164,7 @@ export const makeArrayExtensions = (api: UserAPI) => {
    const chunk_size = divisor; // Get the first argument (chunk size)
    const timepos = api.app.clock.pulses_since_origin;
    const slice_count = Math.floor(
-      timepos / Math.floor(chunk_size * api.ppqn())
+      timepos / Math.floor(chunk_size * api.ppqn()),
    );
    return this[slice_count % this.length];
  };
@ -174,12 +174,12 @@ export const makeArrayExtensions = (api: UserAPI) => {
    const timepos = api.app.clock.pulses_since_origin;
    const ppqn = api.ppqn();
    const adjustedDurations: number[] = this.map(
-      (_, index) => durations[index % durations.length]
+      (_, index) => durations[index % durations.length],
    );
    const totalDurationInPulses = adjustedDurations.reduce(
      // @ts-ignore
      (acc, duration) => acc + duration * ppqn,
-      0
+      0,
    );
    const loopPosition = timepos % totalDurationInPulses;
    let cumulativeDuration = 0;
@ -402,7 +402,7 @@ export const makeArrayExtensions = (api: UserAPI) => {

 Array.prototype.scale = function (
  scale: string = "major",
-  base_note: number = 0
+  base_note: number = 0,
 ) {
  /**
   * @param scale - the scale name
@ -426,7 +426,7 @@ Array.prototype.scale = function (

 Array.prototype.scaleArp = function (
  scaleName: string = "major",
-  boundary: number = 0
+  boundary: number = 0,
 ) {
  /*
   * @param scaleName - the scale name
--- a/src/extensions/NumberExtensions.ts
+++ b/src/extensions/NumberExtensions.ts
@ -29,7 +29,6 @@ declare global {
 }

 export const makeNumberExtensions = (api: UserAPI) => {
-
  Number.prototype.z0 = function (options: { [key: string]: any } = {}) {
    return api.z0(this.valueOf().toString().split("").join(" "), options);
  };
@ -100,7 +99,7 @@ export const makeNumberExtensions = (api: UserAPI) => {

  Number.prototype.midi = function (...kwargs: any[]) {
    return api.midi(this.valueOf(), ...kwargs);
-    }
+  };

  Number.prototype.sound = function (name: string) {
    if (Number.isInteger(this.valueOf())) {
@ -108,6 +107,5 @@ export const makeNumberExtensions = (api: UserAPI) => {
    } else {
      return (api.sound(name) as SoundEvent).freq(this.valueOf());
    }
-    }
-
-}
+  };
+};
--- a/src/extensions/StringExtensions.ts
+++ b/src/extensions/StringExtensions.ts
@ -36,8 +36,8 @@ declare global {
 }

 const isJsonString = (str: string): boolean => {
-    return str[0] === '{' && str[str.length - 1] === '}'
-}
+  return str[0] === "{" && str[str.length - 1] === "}";
+};

 const stringObject = (str: string, params: object) => {
  if (isJsonString(str)) {
@ -46,14 +46,17 @@ const stringObject = (str: string, params: object) => {
  } else {
    return JSON.stringify({ ...params, text: str });
  }
-}
+};

 export const makeStringExtensions = (api: UserAPI) => {
  String.prototype.speak = function () {
    const options = JSON.parse(this.valueOf());
-        new Speaker({ ...options, text: options.text }).speak().then(() => {
+    new Speaker({ ...options, text: options.text })
+      .speak()
+      .then(() => {
        // Done
-        }).catch((e) => {
+      })
+      .catch((e) => {
        console.log("Error speaking:", e);
      });
  };
@ -157,7 +160,7 @@ export const makeStringExtensions = (api: UserAPI) => {
      return noteNameToMidi(this.valueOf());
    }
  };
-}
+};

 type SpeechOptions = {
  text?: string;
@ -166,14 +169,12 @@ type SpeechOptions = {
  volume?: number;
  voice?: number;
  lang?: string;
-}
+};

 let speakerTimeout: number;

 export class Speaker {
-    constructor(
-        public options: SpeechOptions
-    ) {}
+  constructor(public options: SpeechOptions) {}

  speak = () => {
    return new Promise<void>((resolve, reject) => {
@ -191,12 +192,14 @@ export class Speaker {
        if (this.options.lang) {
          // Check if language has country code
          if (this.options.lang.length === 2) {
-                    utterance.lang = `${this.options.lang}-${this.options.lang.toUpperCase()}`
+            utterance.lang = `${
+              this.options.lang
+            }-${this.options.lang.toUpperCase()}`;
          } else if (this.options.lang.length === 5) {
            utterance.lang = this.options.lang;
          } else {
            // Fallback to en us
-                    utterance.lang = 'en-US';
+            utterance.lang = "en-US";
          }
        }

@ -220,11 +223,9 @@ export class Speaker {
        } else {
          synth.speak(utterance);
        }
-
      } else {
        reject("No text provided");
      }
-
    });
-    }
+  };
 }
--- a/src/main.ts
+++ b/src/main.ts
@ -222,7 +222,7 @@ export class Editor {

  updateKnownUniversesView = () => {
    let itemTemplate = document.getElementById(
-      "ui-known-universe-item-template"
+      "ui-known-universe-item-template",
    ) as HTMLTemplateElement;
    if (!itemTemplate) {
      console.warn("Missing template #ui-known-universe-item-template");
@ -250,10 +250,10 @@ export class Editor {
        item
          .querySelector(".delete-universe")
          ?.addEventListener("click", () =>
-            api._deleteUniverseFromInterface(it)
+            api._deleteUniverseFromInterface(it),
          );
        return item;
-      })
+      }),
    );

    existing_universes.innerHTML = "";
@ -334,7 +334,7 @@ export class Editor {

    this.view.dispatch({
      effects: this.chosenLanguage.reconfigure(
-        this.editor_mode == "notes" ? [markdown()] : [javascript()]
+        this.editor_mode == "notes" ? [markdown()] : [javascript()],
      ),
    });

@ -343,7 +343,7 @@ export class Editor {

  setButtonHighlighting(
    button: "play" | "pause" | "stop" | "clear",
-    highlight: boolean
+    highlight: boolean,
  ) {
    document.getElementById("play-label")!.textContent =
      button !== "pause" ? "Pause" : "Play";
@ -391,7 +391,7 @@ export class Editor {
    // All other buttons must lose the highlighting
    document
      .querySelectorAll(
-        possible_selectors.filter((_, index) => index != selector).join(",")
+        possible_selectors.filter((_, index) => index != selector).join(","),
      )
      .forEach((button) => {
        button.children[0].classList.remove("animate-pulse");
@ -437,28 +437,28 @@ export class Editor {
  flashBackground(color: string, duration: number): void {
    const domElement = this.view.dom;
    const gutters = domElement.getElementsByClassName(
-      "cm-gutter"
+      "cm-gutter",
    ) as HTMLCollectionOf<HTMLElement>;

    domElement.classList.add("fluid-bg-transition");
    Array.from(gutters).forEach((gutter) =>
-      gutter.classList.add("fluid-bg-transition")
+      gutter.classList.add("fluid-bg-transition"),
    );

    domElement.style.backgroundColor = color;
    Array.from(gutters).forEach(
-      (gutter) => (gutter.style.backgroundColor = color)
+      (gutter) => (gutter.style.backgroundColor = color),
    );

    setTimeout(() => {
      domElement.style.backgroundColor = "";
      Array.from(gutters).forEach(
-        (gutter) => (gutter.style.backgroundColor = "")
+        (gutter) => (gutter.style.backgroundColor = ""),
      );

      domElement.classList.remove("fluid-bg-transition");
      Array.from(gutters).forEach((gutter) =>
-        gutter.classList.remove("fluid-bg-transition")
+        gutter.classList.remove("fluid-bg-transition"),
      );
    }, duration);
  }
@ -466,7 +466,7 @@ export class Editor {
  private initializeElements(): void {
    for (const [key, value] of Object.entries(singleElements)) {
      this.interface[key] = document.getElementById(
-        value
+        value,
      ) as ElementMap[keyof ElementMap];
    }
  }
@ -474,7 +474,7 @@ export class Editor {
  private initializeButtonGroups(): void {
    for (const [key, ids] of Object.entries(buttonGroups)) {
      this.buttonElements[key] = ids.map(
-        (id) => document.getElementById(id) as HTMLButtonElement
+        (id) => document.getElementById(id) as HTMLButtonElement,
      );
    }
  }
--- a/src/output.css
+++ b/src/output.css
@ -22,7 +22,7 @@

 ::before,
 ::after {
-  --tw-content: '';
+  --tw-content: "";
 }

 /*
@ -44,7 +44,21 @@ html {
  -o-tab-size: 4;
  tab-size: 4;
  /* 3 */
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    Arial,
+    "Noto Sans",
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol",
+    "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
@ -129,7 +143,8 @@ code,
 kbd,
 samp,
 pre {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
@ -224,9 +239,9 @@ select {
 */

 button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
+[type="button"],
+[type="reset"],
+[type="submit"] {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
@ -273,7 +288,7 @@ Correct the cursor style of increment and decrement buttons in Safari.
 2. Correct the outline style in Safari.
 */

-[type='search'] {
+[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
@ -366,7 +381,8 @@ textarea {
 2. Set the default placeholder color to the user's configured gray 400 color.
 */

-input::-moz-placeholder, textarea::-moz-placeholder {
+input::-moz-placeholder,
+textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
@ -434,7 +450,9 @@ video {
  display: none;
 }

-*, ::before, ::after {
+*,
+::before,
+::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
@ -538,7 +556,7 @@ video {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
-  background: #F0F0F0;
+  background: #f0f0f0;
 }

 .hljs,
@ -583,11 +601,11 @@ video {
 .hljs-link,
 .hljs-selector-attr,
 .hljs-selector-pseudo {
-  color: #BC6060;
+  color: #bc6060;
 }

 .hljs-literal {
-  color: #78A960;
+  color: #78a960;
 }

 .hljs-built_in,
@ -1333,8 +1351,10 @@ video {

 .shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),
+    0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }

 .outline {
@ -1350,11 +1370,14 @@ video {
 }

 .filter {
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
+    var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)
+    var(--tw-sepia) var(--tw-drop-shadow);
 }

 .transition-colors {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-property: color, background-color, border-color,
+    text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
 }
@ -1399,15 +1422,21 @@ video {
 }

 .focus\:ring-2:focus {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
+    var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
+    calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
+    var(--tw-shadow, 0 0 #0000);
 }

 .focus\:ring-4:focus {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
+    var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
+    calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
+    var(--tw-shadow, 0 0 #0000);
 }

 .focus\:ring-blue-500:focus {
@ -1431,7 +1460,7 @@ video {
@media (prefers-reduced-motion: no-preference) {
  @keyframes pulse {
    50% {
-      opacity: .5;
+      opacity: 0.5;
    }
  }

--- a/src/style.css
+++ b/src/style.css
@ -3,8 +3,8 @@
@tailwind utilities;

@layer utilities {
-  .striped .col-span-3, .striped .col-span-2 {
-    @apply bg-neutral-300
+  .striped .col-span-3,
+  .striped .col-span-2 {
+    @apply bg-neutral-300;
  }
 }
-
--- a/src/themes/toposTheme.ts
+++ b/src/themes/toposTheme.ts
@ -113,7 +113,7 @@ export const toposDarkTheme = EditorView.theme(
      },
    },
  },
-  { dark: true }
+  { dark: true },
 );

 /// The highlighting style for code in the Material Dark theme.
--- a/src/tidal-drum-machines.json
+++ b/src/tidal-drum-machines.json