First batch of code cleaning

src/DomElements.ts

@@ -57,7 +57,6 @@ export const singleElements = {
   hydra_canvas: "hydra-bg",
   feedback: "feedback",
   drawings: "drawings",
-  scope: "scope",
 };
 
 export const buttonGroups = {

src/EditorSetup.ts

@@ -321,7 +321,7 @@ export const installEditor = (app: Editor) => {
     ),
     editorSetup,
     app.themeCompartment.of(
-      getCodeMirrorTheme(app.getColorScheme("Tomorrow Night Burns")),
+      getCodeMirrorTheme(app.getColorScheme("Batman")),
       // debug
     ),
     app.chosenLanguage.of(javascript()),

src/Evaluator.ts

@@ -1,15 +1,12 @@
 import type { Editor } from "./main";
 import type { File } from "./FileManagement";
 
-const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
-const codeReplace = (code: string): string => {
+const codeReplace = (code: string): string => code.replace(/->|::/g, "&&");
-  return code.replace(/->|::/g, "&&");
+const cache = new Map<string, Function>();
-};
+const MAX_CACHE_SIZE = 40;
 
-const tryCatchWrapper = async (
+async function tryCatchWrapper(application: Editor, code: string): Promise<boolean> {
-  application: Editor,
-  code: string,
-): Promise<boolean> => {
   /**
    * Wraps the provided code in a try-catch block and executes it.
    *
@@ -17,21 +14,15 @@ const tryCatchWrapper = async (
    * @param code - The code to be executed.
    * @returns A promise that resolves to a boolean indicating whether the code executed successfully or not.
    */
-
   try {
-    await new Function(`"use strict"; ${codeReplace(code)}`).call(
+    await new Function(`"use strict"; ${codeReplace(code)}`).call(application.api);
-      application.api,
-    );
     return true;
   } catch (error) {
     application.interface.error_line.innerHTML = error as string;
     application.api._reportError(error as string);
     return false;
   }
-};
+}
-
-const cache = new Map<string, Function>();
-const MAX_CACHE_SIZE = 40;
 
 const addFunctionToCache = (code: string, fn: Function) => {
   /**
@@ -45,11 +36,8 @@ const addFunctionToCache = (code: string, fn: Function) => {
   cache.set(code, fn);
 };
 
-export const tryEvaluate = async (
+
-  application: Editor,
+export async function tryEvaluate(application: Editor, code: File, timeout = 5000): Promise<void> {
-  code: File,
-  timeout = 5000,
-): Promise<void> => {
   /**
    * Tries to evaluate the provided code within a specified timeout period.
    * Increments the evaluation count of the code file.
@@ -63,39 +51,30 @@ export const tryEvaluate = async (
   code.evaluations!++;
   const candidateCode = code.candidate;
 
-  try {
   const cachedFunction = cache.get(candidateCode);
   if (cachedFunction) {
     cachedFunction.call(application.api);
-    } else {
+    return;
+  }
+
   const wrappedCode = `let i = ${code.evaluations}; ${candidateCode}`;
   const isCodeValid = await Promise.race([
     tryCatchWrapper(application, wrappedCode),
-        delay(timeout),
+    delay(timeout)
   ]);
 
   if (isCodeValid) {
-        code.committed = code.candidate;
+    code.committed = candidateCode;
-        const newFunction = new Function(
+    const newFunction = new Function(`"use strict"; ${codeReplace(wrappedCode)}`);
-          `"use strict"; ${codeReplace(wrappedCode)}`,
-        );
     addFunctionToCache(candidateCode, newFunction);
   } else {
     application.api.logOnce("Compilation error!");
-        await evaluate(application, code, timeout);
+    await delay(100);
+    await tryEvaluate(application, code, timeout);
   }
 }
-  } catch (error) {
-    application.interface.error_line.innerHTML = error as string;
-    application.api._reportError(error as string);
-  }
-};
 
-export const evaluate = async (
+export async function evaluate(application: Editor, code: File, timeout = 1000): Promise<void> {
-  application: Editor,
-  code: File,
-  timeout = 1000,
-): Promise<void> => {
   /**
    * Evaluates the given code using the provided application and timeout.
    * @param application The editor application.
@@ -103,18 +82,17 @@ export const evaluate = async (
    * @param timeout The timeout value in milliseconds (default: 1000).
    * @returns A Promise that resolves when the evaluation is complete.
    */
-
   try {
     await Promise.race([
       tryCatchWrapper(application, code.committed as string),
-      delay(timeout),
+      delay(timeout)
     ]);
-    if (code.evaluations) code.evaluations++;
+    code.evaluations!++;
   } catch (error) {
     application.interface.error_line.innerHTML = error as string;
-    console.log(error);
+    console.error(error);
+  }
 }
-};
 
 export const evaluateOnce = async (
   application: Editor,

src/FileManagement.ts

@@ -1,6 +1,4 @@
-// import { tutorial_universe } from "./universes/tutorial";
 import { gzipSync, decompressSync, strFromU8 } from "fflate";
-// import { examples } from "./examples/excerpts";
 import { type Editor } from "./main";
 import { uniqueNamesGenerator, colors, animals } from "unique-names-generator";
 import { tryEvaluate } from "./Evaluator";

src/Keyboard.ts

@@ -1,7 +1,7 @@
 import { type Editor } from "./main";
 import { vim } from "@replit/codemirror-vim";
 import { tryEvaluate } from "./Evaluator";
-import { hideDocumentation, showDocumentation } from "./Documentation";
+import { hideDocumentation, showDocumentation } from "./documentation/Documentation";
 import { openSettingsModal, openUniverseModal } from "./FileManagement";
 
 export const registerFillKeys = (app: Editor) => {

src/TransportProcessor.js

@@ -1,47 +0,0 @@
-class TransportProcessor extends AudioWorkletProcessor {
-    constructor(options) {
-      super(options);
-      this.port.addEventListener("message", this.handleMessage);
-      this.port.start();
-      this.nudge = 0;
-      this.started = false;
-      this.bpm = 120;
-      this.ppqn = 48;
-      this.currentPulsePosition = 0;
-    }
-  
-    handleMessage = (message) => {
-      if (message.data && message.data.type === "ping") {
-        this.port.postMessage(message.data);
-      } else if (message.data.type === "start") {
-        this.started = true;
-      } else if (message.data.type === "pause") {
-        this.started = false;
-      } else if (message.data.type === "stop") {
-        this.started = false;
-      } else if (message.data.type === "bpm") {
-        this.bpm = message.data.value;
-        this.currentPulsePosition = currentTime;
-      } else if (message.data.type === "ppqn") {
-        this.ppqn = message.data.value;
-        this.currentPulsePosition = currentTime;
-      } else if (message.data.type === "nudge") {
-        this.nudge = message.data.value;
-      }
-    };
-  
-    process(inputs, outputs, parameters) {
-      if (this.started) {
-        const adjustedCurrentTime = currentTime + this.nudge / 100;
-        const beatNumber = adjustedCurrentTime / (60 / this.bpm);
-        const currentPulsePosition = Math.ceil(beatNumber * this.ppqn);
-        if (currentPulsePosition > this.currentPulsePosition) {
-          this.currentPulsePosition = currentPulsePosition;
-          this.port.postMessage({ type: "bang", bpm: this.bpm });
-        }
-      }
-      return true;
-    }
-  }
-  
-  registerProcessor("transport", TransportProcessor);

src/UILogic.ts

@@ -8,7 +8,7 @@ import {
   hideDocumentation,
   showDocumentation,
   updateDocumentationContent,
-} from "./Documentation";
+} from "./documentation/Documentation";
 import {
   type Universe,
   template_universe,

src/clock/Clock.ts

@@ -1,7 +1,6 @@
-// @ts-ignore
+import { TransportNode } from "./ClockNode";
-import { TransportNode } from "./TransportNode";
+import TransportProcessor from "./ClockProcessor?worker&url";
-import TransportProcessor from "./TransportProcessor?worker&url";
+import { Editor } from "../main";
-import { Editor } from "./main";
 
 export interface TimePosition {
   /**
@@ -57,7 +56,7 @@ export class Clock {
     this.logicalTime = 0;
     this.tick = 0;
     this._bpm = 120;
-    this._ppqn = 48;
+    this._ppqn = 48 * 2;
     this.transportNode = null;
     this.ctx = ctx;
     this.running = true;
@@ -189,6 +188,11 @@ export class Clock {
   }
 
   public incrementTick(bpm: number) {
+    /**
+    * Increment the clock tick by 1.
+    * @param bpm - The current beats per minute value
+    * @returns void
+    */
     this.tick++;
     this.logicalTime += this.pulse_duration_at_bpm(bpm);
   }

src/clock/ClockNode.d.ts

@@ -0,0 +1,53 @@
+export class TransportNode {
+  constructor(context: AudioContext, something, app: Editor);
+
+  /**
+   * Starts the clock.
+   */
+  start(): void;
+
+  /**
+   * Stops the clock.
+   */
+  stop(): void;
+
+  connect(destionation: AudioNode);
+
+  setNudge(nudge: number): void;
+
+  setPPQN(ppq: number): void;
+
+  setBPM(bpm: number): void;
+
+  pause(): void;
+
+
+  /**
+   * Resets the clock to its initial state.
+   */
+  reset(): void;
+
+  /**
+   * Sets the interval at which the clock updates.
+   * @param interval The interval in milliseconds.
+   */
+  setInterval(interval: number): void;
+
+  /**
+   * Gets the current time of the clock.
+   * @returns The current time as a number.
+   */
+  getTime(): number;
+}
+
+export interface ClockNodeConfig {
+  /**
+   * The initial time for the clock.
+   */
+  startTime?: number;
+
+  /**
+   * The interval in milliseconds at which the clock should update.
+   */
+  updateInterval?: number;
+}

src/clock/ClockNode.js

@@ -1,4 +1,4 @@
-import { tryEvaluate } from "./Evaluator";
+import { tryEvaluate } from "../Evaluator";
 const zeroPad = (num, places) => String(num).padStart(places, "0");
 
 export class TransportNode extends AudioWorkletNode {

src/clock/ClockProcessor.js

@@ -0,0 +1,47 @@
+class TransportProcessor extends AudioWorkletProcessor {
+  constructor(options) {
+    super(options);
+    this.port.addEventListener("message", this.handleMessage);
+    this.port.start();
+    this.nudge = 0;
+    this.started = false;
+    this.bpm = 120;
+    this.ppqn = 48 * 2;
+    this.currentPulsePosition = 0;
+  }
+
+  handleMessage = (message) => {
+    if (message.data && message.data.type === "ping") {
+      this.port.postMessage(message.data);
+    } else if (message.data.type === "start") {
+      this.started = true;
+    } else if (message.data.type === "pause") {
+      this.started = false;
+    } else if (message.data.type === "stop") {
+      this.started = false;
+    } else if (message.data.type === "bpm") {
+      this.bpm = message.data.value;
+      this.currentPulsePosition = currentTime;
+    } else if (message.data.type === "ppqn") {
+      this.ppqn = message.data.value;
+      this.currentPulsePosition = currentTime;
+    } else if (message.data.type === "nudge") {
+      this.nudge = message.data.value;
+    }
+  };
+
+  process(inputs, outputs, parameters) {
+    if (this.started) {
+      const adjustedCurrentTime = currentTime + this.nudge / 100;
+      const beatNumber = adjustedCurrentTime / (60 / this.bpm);
+      const currentPulsePosition = Math.ceil(beatNumber * this.ppqn);
+      if (currentPulsePosition > this.currentPulsePosition) {
+        this.currentPulsePosition = currentPulsePosition;
+        this.port.postMessage({ type: "bang", bpm: this.bpm });
+      }
+    }
+    return true;
+  }
+}
+
+registerProcessor("transport", TransportProcessor);

src/documentation/Documentation.ts

@@ -1,51 +1,29 @@
-import { Editor } from "./main";
+import { Editor } from "../main";
-// Basics
+import { introduction, atelier, software_interface, shortcuts, code, mouse, interaction } from "./basics";
-import { introduction } from "./documentation/basics/welcome";
+import { amplitude, effects, sampler, synths, filters, audio_basics } from "./learning/audio_engine";
-import { atelier } from "./documentation/basics/atelier";
+import { lfos, functions, generators, variables, probabilities } from './patterns';
-import { loading_samples } from "./documentation/learning/samples/loading_samples";
+import { ziffers_basics, ziffers_scales, ziffers_rhythm, ziffers_algorithmic, ziffers_tonnetz, ziffers_syncing } from "./patterns/ziffers";
-import { amplitude } from "./documentation/learning/audio_engine/amplitude";
+import { loading_samples } from "./learning/samples/loading_samples";
-import { effects } from "./documentation/learning/audio_engine/effects";
+import { sample_banks } from "./learning/samples/sample_banks";
-import { sampler } from "./documentation/learning/audio_engine/sampler";
+import { sample_list } from "./learning/samples/sample_list";
-import { sample_banks } from "./documentation/learning/samples/sample_banks";
+import { oscilloscope } from "./more/oscilloscope";
-import { audio_basics } from "./documentation/learning/audio_engine/audio_basics";
+import { synchronisation } from "./more/synchronisation";
-import { sample_list } from "./documentation/learning/samples/sample_list";
+import { about } from "./more/about";
-import { software_interface } from "./documentation/basics/interface";
+import { bonus } from "./more/bonus";
-import { shortcuts } from "./documentation/basics/keyboard";
+import { visualization } from "./more/visualization";
-import { code } from "./documentation/basics/code";
+import { chaining } from "./patterns/chaining";
-import { mouse } from "./documentation/basics/mouse";
+import { time } from "./learning/time/time";
-// More
+import { linear_time } from "./learning/time/linear_time";
-import { oscilloscope } from "./documentation/more/oscilloscope";
+import { cyclical_time } from "./learning/time/cyclical_time";
-import { synchronisation } from "./documentation/more/synchronisation";
+import { long_forms } from "./learning/time/long_forms";
-import { about } from "./documentation/more/about";
+import { midi } from "./learning/midi";
-import { bonus } from "./documentation/more/bonus";
+import { osc } from "./learning/osc";
-import { visualization } from "./documentation/more/visualization";
+import { patterns } from "./patterns/patterns";
-import { chaining } from "./documentation/patterns/chaining";
-import { interaction } from "./documentation/basics/interaction";
-import { time } from "./documentation/learning/time/time";
-import { linear_time } from "./documentation/learning/time/linear_time";
-import { cyclical_time } from "./documentation/learning/time/cyclical_time";
-import { long_forms } from "./documentation/learning/time/long_forms";
-import { midi } from "./documentation/learning/midi";
-import { osc } from "./documentation/learning/osc";
-import { patterns } from "./documentation/patterns/patterns";
-import { functions } from "./documentation/patterns/functions";
-import { generators } from "./documentation/patterns/generators";
-import { variables } from "./documentation/patterns/variables";
-import { probabilities } from "./documentation/patterns/probabilities";
-import { lfos } from "./documentation/patterns/lfos";
-import { ziffers_basics } from "./documentation/patterns/ziffers/ziffers_basics";
-import { ziffers_scales } from "./documentation/patterns/ziffers/ziffers_scales";
-import { ziffers_rhythm } from "./documentation/patterns/ziffers/ziffers_rhythm";
-import { ziffers_algorithmic } from "./documentation/patterns/ziffers/ziffers_algorithmic";
-import { ziffers_tonnetz } from "./documentation/patterns/ziffers/ziffers_tonnetz";
-import { ziffers_syncing } from "./documentation/patterns/ziffers/ziffers_syncing";
-import { synths } from "./documentation/learning/audio_engine/synths";
 // Setting up the Markdown converter with syntax highlighting
 import showdown from "showdown";
 import showdownHighlight from "showdown-highlight";
 import "highlight.js/styles/atom-one-dark-reasonable.min.css";
-import { createDocumentationStyle } from "./DomElements";
+import { createDocumentationStyle } from "../DomElements";
-import { filters } from "./documentation/learning/audio_engine/filters";
 showdown.setFlavor("github");
 
 type StyleBinding = {

src/documentation/basics/atelier.ts

@@ -1,5 +1,5 @@
 import { type Editor } from "../../main";
-import { makeExampleFactory } from "../../Documentation";
+import { makeExampleFactory } from "../Documentation";
 
 export const atelier = (application: Editor): string => {
   const makeExample = makeExampleFactory(application);

src/documentation/basics/code.ts

@@ -1,5 +1,5 @@
 import { type Editor } from "../../main";
-import { makeExampleFactory, key_shortcut } from "../../Documentation";
+import { makeExampleFactory, key_shortcut } from "../Documentation";
 
 export const code = (application: Editor): string => {
   const makeExample = makeExampleFactory(application);

src/documentation/basics/index.ts

@@ -0,0 +1,7 @@
+export { introduction } from './welcome';
+export { atelier } from './atelier';
+export { software_interface } from './interface';
+export { shortcuts } from './keyboard';
+export { code } from './code';
+export { mouse } from './mouse';
+export { interaction } from './interaction';

src/documentation/basics/interaction.ts

@@ -1,5 +1,5 @@
 import { type Editor } from "../../main";
-import { makeExampleFactory } from "../../Documentation";
+import { makeExampleFactory } from "../Documentation";
 
 // @ts-ignore
 export const interaction = (application: Editor): string => {

src/documentation/basics/interface.ts

@@ -1,4 +1,4 @@
-import { key_shortcut, makeExampleFactory } from "../../Documentation";
+import { key_shortcut, makeExampleFactory } from "../Documentation";
 import { type Editor } from "../../main";
 import topos_arch from "./topos_arch.svg";
 import many_universes from "./many_universes.svg";

src/documentation/basics/keyboard.ts

@@ -1,6 +1,6 @@
-import { key_shortcut } from "../../Documentation";
+import { key_shortcut } from "../Documentation";
 import { type Editor } from "../../main";
-import { makeExampleFactory } from "../../Documentation";
+import { makeExampleFactory } from "../Documentation";
 
 export const shortcuts = (app: Editor): string => {
   let makeExample = makeExampleFactory(app);

src/documentation/basics/mouse.ts

@@ -1,5 +1,5 @@
 import { type Editor } from "../../main";
-import { makeExampleFactory } from "../../Documentation";
+import { makeExampleFactory } from "../Documentation";
 
 export const mouse = (app: Editor): string => {
   let makeExample = makeExampleFactory(app);

src/documentation/basics/welcome.ts

@@ -1,6 +1,6 @@
-import { makeExampleFactory, key_shortcut } from "../../Documentation";
+import { makeExampleFactory, key_shortcut } from "../Documentation";
 import { type Editor } from "../../main";
-import { examples } from "../../examples/excerpts";
+import { examples } from "../excerpts";
 
 export const introduction = (application: Editor): string => {
   const makeExample = makeExampleFactory(application);

src/documentation/learning/audio_engine/amplitude.ts

@@ -1,5 +1,5 @@
 import { type Editor } from "../../../main";
-import { makeExampleFactory } from "../../../Documentation";
+import { makeExampleFactory } from "../../Documentation";
 
 export const amplitude = (application: Editor): string => {
   // @ts-ignore

src/documentation/learning/audio_engine/audio_basics.ts

@@ -1,5 +1,5 @@
 import { type Editor } from "../../../main";
-import { makeExampleFactory } from "../../../Documentation";
+import { makeExampleFactory } from "../../Documentation";
 
 export const audio_basics = (application: Editor): string => {
   // @ts-ignore

src/documentation/learning/audio_engine/distortion.ts

@@ -1,5 +1,5 @@
 import { type Editor } from "../../../main";
-import { makeExampleFactory } from "../../../Documentation";
+import { makeExampleFactory } from "../../Documentation";
 
 export const distortion = (application: Editor): string => {
   // @ts-ignore

src/documentation/learning/audio_engine/effects.ts

@@ -1,5 +1,5 @@
 import { type Editor } from "../../../main";
-import { makeExampleFactory } from "../../../Documentation";
+import { makeExampleFactory } from "../../Documentation";
 
 export const effects = (application: Editor): string => {
   // @ts-ignore

src/documentation/learning/audio_engine/filters.ts

@@ -1,5 +1,5 @@
 import { type Editor } from "../../../main";
-import { makeExampleFactory } from "../../../Documentation";
+import { makeExampleFactory } from "../../Documentation";
 
 export const filters = (application: Editor): string => {
   const makeExample = makeExampleFactory(application);

src/documentation/learning/audio_engine/index.ts

@@ -0,0 +1,6 @@
+export { amplitude } from './amplitude';
+export { effects } from './effects';
+export { sampler } from './sampler';
+export { synths } from './synths';
+export { filters } from './filters';
+export { audio_basics } from './audio_basics';

src/documentation/learning/audio_engine/sampler.ts

@@ -1,5 +1,5 @@
 import { type Editor } from "../../../main";
-import { makeExampleFactory } from "../../../Documentation";
+import { makeExampleFactory } from "../../Documentation";
 
 export const sampler = (application: Editor): string => {
   // @ts-ignore

src/documentation/learning/audio_engine/synths.ts

@@ -1,5 +1,5 @@
 import { type Editor } from "../../../main";
-import { makeExampleFactory } from "../../../Documentation";
+import { makeExampleFactory } from "../../Documentation";
 
 export const synths = (application: Editor): string => {
   const makeExample = makeExampleFactory(application);

src/documentation/learning/midi.ts

@@ -1,5 +1,5 @@
 import { type Editor } from "../../main";
-import { makeExampleFactory, key_shortcut } from "../../Documentation";
+import { makeExampleFactory, key_shortcut } from "../Documentation";
 
 export const midi = (application: Editor): string => {
   const makeExample = makeExampleFactory(application);

src/documentation/learning/osc.ts

@@ -1,5 +1,5 @@
 import { type Editor } from "../../main";
-import { makeExampleFactory } from "../../Documentation";
+import { makeExampleFactory } from "../Documentation";
 
 export const osc = (application: Editor): string => {
   // @ts-ignore

src/documentation/learning/samples/index.ts

@@ -0,0 +1,3 @@
+export { loading_samples } from './loading_samples';
+export { sample_banks } from './sample_banks';
+export { sample_list } from './sample_list';

src/documentation/learning/samples/loading_samples.ts

@@ -1,5 +1,5 @@
 import { type Editor } from "../../../main";
-import { makeExampleFactory } from "../../../Documentation";
+import { makeExampleFactory } from "../../Documentation";
 
 export const loading_samples = (application: Editor): string => {
   // @ts-ignore

src/documentation/learning/samples/sample_banks.ts

@@ -1,5 +1,5 @@
 import { type Editor } from "../../../main";
-import { makeExampleFactory } from "../../../Documentation";
+import { makeExampleFactory } from "../../Documentation";
 
 export const sample_banks = (application: Editor): string => {
   // @ts-ignore

src/documentation/learning/samples/sample_list.ts

@@ -1,5 +1,5 @@
 import { type Editor } from "../../../main";
-import { makeExampleFactory } from "../../../Documentation";
+import { makeExampleFactory } from "../../Documentation";
 
 export const samples_to_markdown = (
   application: Editor,

src/documentation/learning/time/cyclical_time.ts

@@ -1,5 +1,5 @@
 import { type Editor } from "../../../main";
-import { makeExampleFactory } from "../../../Documentation";
+import { makeExampleFactory } from "../../Documentation";
 
 export const cyclical_time = (app: Editor): string => {
   // @ts-ignore

src/documentation/learning/time/linear_time.ts

@@ -1,5 +1,5 @@
 import { type Editor } from "../../../main";
-import { makeExampleFactory } from "../../../Documentation";
+import { makeExampleFactory } from "../../Documentation";
 import pulses from "./pulses.svg";
 
 export const linear_time = (app: Editor): string => {

src/documentation/learning/time/long_forms.ts

@@ -1,5 +1,5 @@
 import { type Editor } from "../../../main";
-import { makeExampleFactory } from "../../../Documentation";
+import { makeExampleFactory } from "../../Documentation";
 
 export const long_forms = (app: Editor): string => {
   // @ts-ignore

src/documentation/learning/time/time.ts

@@ -1,4 +1,4 @@
-import { makeExampleFactory } from "../../../Documentation";
+import { makeExampleFactory } from "../../Documentation";
 import { type Editor } from "../../../main";
 import times from "./times.svg";
 

src/documentation/more/bonus.ts

@@ -1,5 +1,5 @@
 import { type Editor } from "../../main";
-import { key_shortcut, makeExampleFactory } from "../../Documentation";
+import { key_shortcut, makeExampleFactory } from "../Documentation";
 
 export const bonus = (application: Editor): string => {
   const makeExample = makeExampleFactory(application);

src/documentation/more/index.ts

@@ -0,0 +1,5 @@
+export { about } from './about';
+export { bonus } from './bonus';
+export { oscilloscope } from './oscilloscope';
+export { synchronisation } from './synchronisation';
+export { visualization } from './visualization.ts';

src/documentation/more/oscilloscope.ts

@@ -1,5 +1,5 @@
 import { type Editor } from "../../main";
-import { makeExampleFactory } from "../../Documentation";
+import { makeExampleFactory } from "../Documentation";
 
 export const oscilloscope = (application: Editor): string => {
   const makeExample = makeExampleFactory(application);

src/documentation/more/synchronisation.ts

@@ -1,5 +1,5 @@
 import { type Editor } from "../../main";
-import { makeExampleFactory } from "../../Documentation";
+import { makeExampleFactory } from "../Documentation";
 
 export const synchronisation = (app: Editor): string => {
   // @ts-ignore

src/documentation/more/visualization.ts

@@ -1,5 +1,5 @@
 import { type Editor } from "../../main";
-import { key_shortcut, makeExampleFactory } from "../../Documentation";
+import { key_shortcut, makeExampleFactory } from "../Documentation";
 
 export const visualization = (application: Editor): string => {
   const makeExample = makeExampleFactory(application);

src/documentation/patterns/chaining.ts

@@ -1,4 +1,4 @@
-import { makeExampleFactory } from "../../Documentation";
+import { makeExampleFactory } from "../Documentation";
 import { type Editor } from "../../main";
 
 export const chaining = (application: Editor): string => {

src/documentation/patterns/functions.ts

@@ -1,5 +1,5 @@
 import { type Editor } from "../../main";
-import { makeExampleFactory } from "../../Documentation";
+import { makeExampleFactory } from "../Documentation";
 
 export const functions = (application: Editor): string => {
   const makeExample = makeExampleFactory(application);

src/documentation/patterns/generators.ts

@@ -1,5 +1,5 @@
 import { type Editor } from "../../main";
-import { makeExampleFactory } from "../../Documentation";
+import { makeExampleFactory } from "../Documentation";
 
 export const generators = (application: Editor): string => {
   const makeExample = makeExampleFactory(application);

src/documentation/patterns/index.ts

@@ -0,0 +1,7 @@
+export { chaining } from './chaining';
+export { functions } from './functions';
+export { generators } from './generators';
+export { lfos } from './lfos';
+export { patterns } from './patterns';
+export { probabilities } from './probabilities';
+export { variables } from './variables';

src/documentation/patterns/lfos.ts

@@ -1,5 +1,5 @@
 import { type Editor } from "../../main";
-import { makeExampleFactory } from "../../Documentation";
+import { makeExampleFactory } from "../Documentation";
 
 export const lfos = (application: Editor): string => {
   const makeExample = makeExampleFactory(application);

src/documentation/patterns/patterns.ts

@@ -1,5 +1,5 @@
 import { type Editor } from "../../main";
-import { makeExampleFactory } from "../../Documentation";
+import { makeExampleFactory } from "../Documentation";
 
 export const patterns = (application: Editor): string => {
   const makeExample = makeExampleFactory(application);

src/documentation/patterns/probabilities.ts

@@ -1,5 +1,5 @@
 import { type Editor } from "../../main";
-import { makeExampleFactory } from "../../Documentation";
+import { makeExampleFactory } from "../Documentation";
 
 export const probabilities = (application: Editor): string => {
   const makeExample = makeExampleFactory(application);

src/documentation/patterns/variables.ts

@@ -1,5 +1,5 @@
 import { type Editor } from "../../main";
-import { makeExampleFactory } from "../../Documentation";
+import { makeExampleFactory } from "../Documentation";
 
 export const variables = (application: Editor): string => {
   const makeExample = makeExampleFactory(application);

src/documentation/patterns/ziffers/index.ts

@@ -0,0 +1,6 @@
+export { ziffers_basics } from './ziffers_basics';
+export { ziffers_scales } from './ziffers_scales';
+export { ziffers_rhythm } from './ziffers_rhythm';
+export { ziffers_algorithmic } from './ziffers_algorithmic';
+export { ziffers_tonnetz } from './ziffers_tonnetz';
+export { ziffers_syncing } from './ziffers_syncing';

src/documentation/patterns/ziffers/ziffers_algorithmic.ts

@@ -1,5 +1,5 @@
 import { type Editor } from "../../../main";
-import { makeExampleFactory } from "../../../Documentation";
+import { makeExampleFactory } from "../../Documentation";
 
 export const ziffers_algorithmic = (application: Editor): string => {
   const makeExample = makeExampleFactory(application);

src/documentation/patterns/ziffers/ziffers_basics.ts

@@ -1,5 +1,5 @@
 import { type Editor } from "../../../main";
-import { makeExampleFactory } from "../../../Documentation";
+import { makeExampleFactory } from "../../Documentation";
 
 export const ziffers_basics = (application: Editor): string => {
   const makeExample = makeExampleFactory(application);

src/documentation/patterns/ziffers/ziffers_rhythm.ts

@@ -1,5 +1,5 @@
 import { type Editor } from "../../../main";
-import { makeExampleFactory } from "../../../Documentation";
+import { makeExampleFactory } from "../../Documentation";
 
 export const ziffers_rhythm = (application: Editor): string => {
   const makeExample = makeExampleFactory(application);

src/documentation/patterns/ziffers/ziffers_scales.ts

@@ -1,5 +1,5 @@
 import { type Editor } from "../../../main";
-import { makeExampleFactory } from "../../../Documentation";
+import { makeExampleFactory } from "../../Documentation";
 
 export const ziffers_scales = (application: Editor): string => {
   const makeExample = makeExampleFactory(application);

src/documentation/patterns/ziffers/ziffers_syncing.ts

@@ -1,5 +1,5 @@
 import { type Editor } from "../../../main";
-import { makeExampleFactory } from "../../../Documentation";
+import { makeExampleFactory } from "../../Documentation";
 
 export const ziffers_syncing = (application: Editor): string => {
   const makeExample = makeExampleFactory(application);

src/documentation/patterns/ziffers/ziffers_tonnetz.ts

@@ -1,5 +1,5 @@
 import { type Editor } from "../../../main";
-import { makeExampleFactory } from "../../../Documentation";
+import { makeExampleFactory } from "../../Documentation";
 
 export const ziffers_tonnetz = (application: Editor): string => {
   const makeExample = makeExampleFactory(application);

src/main.ts

@@ -13,11 +13,11 @@ import {
   loadUniverserFromUrl,
 } from "./FileManagement";
 import { singleElements, buttonGroups, ElementMap, createDocumentationStyle } from "./DomElements";
-import { registerFillKeys, registerOnKeyDown } from "./KeyActions";
+import { registerFillKeys, registerOnKeyDown } from "./Keyboard";
 import { installEditor } from "./EditorSetup";
-import { documentation_factory, documentation_pages, showDocumentation, updateDocumentationContent } from "./Documentation";
+import { documentation_factory, documentation_pages, showDocumentation, updateDocumentationContent } from "./documentation/Documentation";
 import { EditorView } from "codemirror";
-import { Clock } from "./Clock";
+import { Clock } from "./clock/Clock";
 import { loadSamples, UserAPI } from "./API";
 import * as oeis from "jisg";
 import * as zpatterns from "zifferjs/src/patterns.ts";
@@ -28,7 +28,7 @@ import { tryEvaluate } from "./Evaluator";
 // @ts-ignore
 import showdown from "showdown";
 import { makeStringExtensions } from "./extensions/StringExtensions";
-import { installInterfaceLogic } from "./InterfaceLogic";
+import { installInterfaceLogic } from "./UILogic";
 import { installWindowBehaviors } from "./WindowBehavior";
 import { makeNumberExtensions } from "./extensions/NumberExtensions";
 import colors from "./colors.json";
@@ -124,7 +124,6 @@ export class Editor {
     this.initializeElements();
     this.initializeButtonGroups();
     this.setCanvas(this.interface.feedback as HTMLCanvasElement);
-    this.setCanvas(this.interface.scope as HTMLCanvasElement);
     this.setCanvas(this.interface.drawings as HTMLCanvasElement);
     try {
       this.loadHydraSynthAsync();
@@ -198,7 +197,7 @@ export class Editor {
     // ================================================================================
 
     installEditor(this);
-    runOscilloscope(this.interface.scope as HTMLCanvasElement, this);
+    runOscilloscope(this.interface.feedback as HTMLCanvasElement, this);
 
     // First evaluation of the init file
     tryEvaluate(this, this.universes[this.selected_universe.toString()].init);
@@ -581,7 +580,6 @@ export class Editor {
   private setCanvas(canvas: HTMLCanvasElement): void {
     /**
      * Sets the canvas element and configures its size and context.
-     *
      * @param canvas - The HTMLCanvasElement to set.
      */
     if (!canvas) return;