diff --git a/demo/_xanadu-article.html b/demo/_xanadu-article.html
index 6ab9a06..9792732 100644
--- a/demo/_xanadu-article.html
+++ b/demo/_xanadu-article.html
@@ -133,7 +133,7 @@
     </main>
 
     <script type="module">
-      import '../src/arrows/iframe-script.ts';
+      import '../src/common/iframe-script.ts';
     </script>
   </body>
 </html>
diff --git a/demo/animated-shapes.html b/demo/animated-shapes.html
index 0101703..956540c 100644
--- a/demo/animated-shapes.html
+++ b/demo/animated-shapes.html
@@ -66,7 +66,7 @@
     <folk-shape x="100" y="300" width="50" height="50"></folk-shape>
 
     <script type="module">
-      import { FolkShape } from '../src/canvas/folk-shape.ts';
+      import { FolkShape } from '../src/folk-shape.ts';
 
       FolkShape.define();
 
diff --git a/demo/arrows.html b/demo/arrows.html
index 664c60c..2e54f47 100644
--- a/demo/arrows.html
+++ b/demo/arrows.html
@@ -33,9 +33,9 @@
     <folk-connection source="#box1" target="#box2"></folk-connection>
 
     <script type="module">
-      import { FolkShape } from '../src/canvas/folk-shape.ts';
-      import { FolkConnection } from '../src/arrows/folk-connection.ts';
-      import '../src/arrows/iframe-script.ts';
+      import { FolkShape } from '../src/folk-shape.ts';
+      import { FolkConnection } from '../src/folk-connection.ts';
+      import '../src/common/iframe-script.ts';
 
       FolkShape.define();
       FolkConnection.define();
diff --git a/demo/beats.html b/demo/beats.html
index e059cdb..ea56bd1 100644
--- a/demo/beats.html
+++ b/demo/beats.html
@@ -15,7 +15,7 @@
         margin: 0;
       }
 
-      event-propagator {
+      folk-event-propagator {
         display: block;
         position: absolute;
         inset: 0 0 0 0;
@@ -45,30 +45,30 @@
       <audio id="hat" src="/Hat_Closed.wav" controls></audio>
     </folk-shape>
 
-    <event-propagator
+    <folk-event-propagator
       source="folk-metronome"
       target="#kick"
       triggers="beat"
       expression="if ($source.beat % 2 === 0) $target.play();"
-    ></event-propagator>
+    ></folk-event-propagator>
 
-    <event-propagator
+    <folk-event-propagator
       source="folk-metronome"
       target="#hat"
       triggers="beat"
       expression="if ($source.beat > 2) $target.play();"
-    ></event-propagator>
+    ></folk-event-propagator>
 
     <script type="module">
-      import { FolkShape } from '../src/canvas/folk-shape.ts';
+      import { FolkShape } from '../src/folk-shape.ts';
       import { FolkLLM } from '../src/folk-llm.ts';
       import { FolkMetronome } from '../src/folk-metronome.ts';
-      import { EventPropagator } from '../src/arrows/event-propagator.ts';
+      import { FolkEventPropagator } from '../src/folk-event-propagator.ts';
 
       FolkShape.define();
       FolkLLM.define();
       FolkMetronome.define();
-      EventPropagator.define();
+      FolkEventPropagator.define();
     </script>
   </body>
 </html>
diff --git a/demo/canvasify.html b/demo/canvasify.html
index 9f8e063..8f4ec16 100644
--- a/demo/canvasify.html
+++ b/demo/canvasify.html
@@ -100,7 +100,7 @@
     </main>
 
     <script type="module">
-      import { FolkShape } from '../src/canvas/folk-shape.ts';
+      import { FolkShape } from '../src/folk-shape.ts';
 
       FolkShape.define();
 
diff --git a/demo/chains-of-thought/main.ts b/demo/chains-of-thought/main.ts
index 7fb4064..7b5fca1 100644
--- a/demo/chains-of-thought/main.ts
+++ b/demo/chains-of-thought/main.ts
@@ -1,6 +1,6 @@
-import { FolkShape } from '../../src/canvas/folk-shape.ts';
-import { FolkConnection } from '../../src/arrows/folk-connection.ts';
-import { FileSaver } from '../../src/file-system.ts';
+import { FolkShape } from '../../src/folk-shape.ts';
+import { FolkConnection } from '../../src/folk-connection.ts';
+import { FileSaver } from '../src/file-system.ts';
 
 declare global {
   interface HTMLElementTagNameMap {
diff --git a/demo/collision.html b/demo/collision.html
index 7f92d3c..2a5ad3a 100644
--- a/demo/collision.html
+++ b/demo/collision.html
@@ -29,8 +29,8 @@
     <folk-shape x="200" y="200" width="50" height="50"></folk-shape>
 
     <script type="module">
-      import { FolkShape } from '../src/canvas/folk-shape.ts';
-      import { collisionDetection } from '../src/collision.ts';
+      import { FolkShape } from '../src/folk-shape.ts';
+      import { collisionDetection } from '../src/common/collision.ts';
 
       FolkShape.define();
 
diff --git a/demo/distance-perf.html b/demo/distance-perf.html
index c561a4a..c21747a 100644
--- a/demo/distance-perf.html
+++ b/demo/distance-perf.html
@@ -29,7 +29,7 @@
     <distance-field> </distance-field>
     <script type="module">
       import { DistanceField } from '../src/distance-field.ts';
-      import { FolkShape } from '../src/canvas/folk-shape.ts';
+      import { FolkShape } from '../src/folk-shape.ts';
 
       FolkShape.define();
 
diff --git a/demo/distance.html b/demo/distance.html
index 149f348..044dd6f 100644
--- a/demo/distance.html
+++ b/demo/distance.html
@@ -42,7 +42,7 @@
     </distance-field>
 
     <script type="module">
-      import { FolkShape } from '../src/canvas/folk-shape.ts';
+      import { FolkShape } from '../src/folk-shape.ts';
       import { DistanceField } from '../src/distance-field.ts';
 
       FolkShape.define();
diff --git a/demo/event-propagator.html b/demo/event-propagator.html
index 3a832e4..9d00209 100644
--- a/demo/event-propagator.html
+++ b/demo/event-propagator.html
@@ -23,7 +23,7 @@
         z-index: 10;
       }
 
-      event-propagator {
+      folk-event-propagator {
         display: block;
         position: absolute;
         inset: 0 0 0 0;
@@ -34,29 +34,29 @@
   <body>
     <folk-shape id="box1" x="100" y="100" width="30" height="30"></folk-shape>
     <folk-shape id="box2" x="200" y="350">Hello World</folk-shape>
-    <event-propagator
+    <folk-event-propagator
       source="#box1"
       target="#box2"
       triggers="click"
       expression="textContent: _ + '!'"
-    ></event-propagator>
+    ></folk-event-propagator>
 
     <folk-shape id="box3" x="350" y="200" width="30" height="30"></folk-shape>
     <folk-shape id="box4" x="500" y="250" width="30" height="30"></folk-shape>
-    <event-propagator
+    <folk-event-propagator
       source="#box3"
       target="#box4"
       triggers="move"
       expression="y: from.x,
 rotate: from.x"
-    ></event-propagator>
+    ></folk-event-propagator>
 
     <script type="module">
-      import { FolkShape } from '../src/canvas/folk-shape.ts';
-      import { EventPropagator } from '../src/arrows/event-propagator.ts';
+      import { FolkShape } from '../src/folk-shape.ts';
+      import { FolkEventPropagator } from '../src/folk-event-propagator.ts';
 
       FolkShape.define();
-      EventPropagator.define();
+      FolkEventPropagator.define();
     </script>
   </body>
 </html>
diff --git a/demo/hull.html b/demo/hull.html
index 5b74dab..f5df871 100644
--- a/demo/hull.html
+++ b/demo/hull.html
@@ -36,7 +36,7 @@
     <folk-hull sources="folk-shape"></folk-hull>
 
     <script type="module">
-      import { FolkShape } from '../src/canvas/folk-shape.ts';
+      import { FolkShape } from '../src/folk-shape.ts';
       import { FolkHull } from '../src/folk-hull.ts';
 
       FolkShape.define();
diff --git a/demo/iframed-arrows.html b/demo/iframed-arrows.html
index 0e4ce7a..9100c07 100644
--- a/demo/iframed-arrows.html
+++ b/demo/iframed-arrows.html
@@ -44,8 +44,8 @@
     <folk-rope source="#frame1 >>> #box1" target="#frame2 >>> #box1"></folk-rope>
 
     <script type="module">
-      import { FolkShape } from '../src/canvas/folk-shape.ts';
-      import { FolkRope } from '../src/arrows/folk-rope.ts';
+      import { FolkShape } from '../src/folk-shape.ts';
+      import { FolkRope } from '../src/folk-rope.ts';
 
       FolkShape.define();
       FolkRope.define();
diff --git a/demo/ink.html b/demo/ink.html
index 7c9cc16..5773bb7 100644
--- a/demo/ink.html
+++ b/demo/ink.html
@@ -21,7 +21,7 @@
       <button on:click="DRAW">Draw</button>
     </nav>
     <script type="module">
-      import { FolkShape } from '../src/canvas/folk-shape.ts';
+      import { FolkShape } from '../src/folk-shape.ts';
       import { FolkInk } from '../src/folk-ink.ts';
 
       FolkShape.define();
diff --git a/demo/llm.html b/demo/llm.html
index 2e5b693..349c749 100644
--- a/demo/llm.html
+++ b/demo/llm.html
@@ -15,7 +15,7 @@
         margin: 0;
       }
 
-      event-propagator {
+      folk-event-propagator {
         display: block;
         position: absolute;
         inset: 0 0 0 0;
@@ -84,38 +84,38 @@
       <folk-timer></folk-timer>
     </folk-shape>
 
-    <event-propagator
+    <folk-event-propagator
       source="#recipe"
       target="folk-llm"
       triggers="click"
       expression="prompt: `double this list of ingredients '${from.innerHTML}'`"
-    ></event-propagator>
+    ></folk-event-propagator>
 
-    <event-propagator
+    <folk-event-propagator
       source="folk-llm"
       target="folk-timer"
       triggers="started"
       expression="$target.reset(); $target.start()"
     >
-    </event-propagator>
+    </folk-event-propagator>
 
-    <event-propagator
+    <folk-event-propagator
       source="folk-llm"
       target="folk-timer"
       triggers="finished"
       expression="$target.stop();"
-    ></event-propagator>
+    ></folk-event-propagator>
 
     <script type="module">
-      import { FolkShape } from '../src/canvas/folk-shape.ts';
+      import { FolkShape } from '../src/folk-shape.ts';
       import { FolkLLM } from '../src/folk-llm.ts';
       import { FolkTimer } from '../src/folk-timer.ts';
-      import { EventPropagator } from '../src/arrows/event-propagator.ts';
+      import { FolkEventPropagator } from '../src/folk-event-propagator.ts';
 
       FolkShape.define();
       FolkLLM.define();
       FolkTimer.define();
-      EventPropagator.define();
+      FolkEventPropagator.define();
     </script>
   </body>
 </html>
diff --git a/demo/perf.html b/demo/perf.html
index 2858700..3aa3a30 100644
--- a/demo/perf.html
+++ b/demo/perf.html
@@ -22,7 +22,7 @@
   </head>
   <body>
     <script type="module">
-      import { FolkShape } from '../src/canvas/folk-shape.ts';
+      import { FolkShape } from '../src/folk-shape.ts';
 
       FolkShape.define();
 
diff --git a/demo/proximity-maps.html b/demo/proximity-maps.html
index cbb4dba..f58b1c0 100644
--- a/demo/proximity-maps.html
+++ b/demo/proximity-maps.html
@@ -76,7 +76,7 @@
     </folk-proximity>
 
     <script type="module">
-      import { FolkShape } from '../src/canvas/folk-shape.ts';
+      import { FolkShape } from '../src/folk-shape.ts';
       import { FolkMap } from '../src/folk-map.ts';
       import { FolkWeather } from '../src/folk-weather.ts';
       import { FolkCluster, FolkProximity } from '../src/folk-proximity.ts';
diff --git a/demo/proximity-music.html b/demo/proximity-music.html
index 9ed4ac5..9457d73 100644
--- a/demo/proximity-music.html
+++ b/demo/proximity-music.html
@@ -60,9 +60,9 @@
     </folk-shape>
 
     <script type="module">
-      import { FolkShape } from '../src/canvas/folk-shape.ts';
-      import { RecordPlayer } from '../src/music/record-player.ts';
-      import { collisionDetection } from '../src/collision.ts';
+      import { FolkShape } from '../src/folk-shape.ts';
+      import { RecordPlayer } from './src/record-player.ts';
+      import { collisionDetection } from '../src/common/collision.ts';
 
       FolkShape.define();
       RecordPlayer.define();
diff --git a/demo/qr-code.html b/demo/qr-code.html
index 96a049a..8c56f96 100644
--- a/demo/qr-code.html
+++ b/demo/qr-code.html
@@ -20,14 +20,14 @@
         field-sizing: content;
       }
 
-      event-propagator {
+      folk-event-propagator {
         display: block;
         position: absolute;
         inset: 0 0 0 0;
         pointer-events: none;
       }
 
-      body:not([rope-mode]) event-propagator {
+      body:not([rope-mode]) folk-event-propagator {
         display: none;
       }
 
@@ -56,34 +56,34 @@
       <sl-qr-code size="200"></sl-qr-code>
     </folk-shape>
 
-    <event-propagator
+    <folk-event-propagator
       source="textarea"
       target="sl-qr-code"
       triggers="input"
       expression="value: from.value"
-    ></event-propagator>
+    ></folk-event-propagator>
 
-    <event-propagator
+    <folk-event-propagator
       source="input[type='range']"
       target="sl-qr-code"
       triggers="input"
       expression="radius: from.value"
-    ></event-propagator>
+    ></folk-event-propagator>
 
-    <event-propagator
+    <folk-event-propagator
       source="input[type='color']"
       target="sl-qr-code"
       triggers="input"
       expression="fill: from.value"
-    ></event-propagator>
+    ></folk-event-propagator>
 
     <script type="module">
       import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.18.0/cdn/components/qr-code/qr-code.js';
-      import { FolkShape } from '../src/canvas/folk-shape.ts';
-      import { EventPropagator } from '../src/arrows/event-propagator.ts';
+      import { FolkShape } from '../src/folk-shape.ts';
+      import { FolkEventPropagator } from '../src/folk-event-propagator.ts';
 
       FolkShape.define();
-      EventPropagator.define();
+      FolkEventPropagator.define();
 
       const ropeMode = document.querySelector('input[type="checkbox"]');
 
diff --git a/demo/wiggly.html b/demo/rope.html
similarity index 90%
rename from demo/wiggly.html
rename to demo/rope.html
index f197e9c..fbe32e2 100644
--- a/demo/wiggly.html
+++ b/demo/rope.html
@@ -38,8 +38,8 @@
     <folk-rope source="#box1" target="#box4"></folk-rope>
 
     <script type="module">
-      import { FolkShape } from '../src/canvas/folk-shape.ts';
-      import { FolkRope } from '../src/arrows/folk-rope.ts';
+      import { FolkShape } from '../src/folk-shape.ts';
+      import { FolkRope } from '../src/folk-rope.ts';
 
       FolkShape.define();
       FolkRope.define();
diff --git a/demo/semantic-zoom.html b/demo/semantic-zoom.html
index 33c7daf..57a2e79 100644
--- a/demo/semantic-zoom.html
+++ b/demo/semantic-zoom.html
@@ -150,8 +150,8 @@
     <folk-connection source="#box1" target="#box3"></folk-connection>
 
     <script type="module">
-      import { FolkShape } from '../src/canvas/folk-shape.ts';
-      import { FolkConnection } from '../src/arrows/folk-connection.ts';
+      import { FolkShape } from '../src/folk-shape.ts';
+      import { FolkConnection } from '../src/folk-connection.ts';
 
       FolkShape.define();
       FolkConnection.define();
diff --git a/demo/shapes.html b/demo/shapes.html
index cc454eb..5b4b4b2 100644
--- a/demo/shapes.html
+++ b/demo/shapes.html
@@ -26,7 +26,7 @@
     <folk-shape x="100" y="300" width="50" height="50" rotate="45"></folk-shape>
 
     <script type="module">
-      import { FolkShape } from '../src/canvas/folk-shape.ts';
+      import { FolkShape } from '../src/folk-shape.ts';
 
       FolkShape.define();
     </script>
diff --git a/demo/spreadsheet-graph.html b/demo/spreadsheet-graph.html
index 0165f70..bd1bf35 100644
--- a/demo/spreadsheet-graph.html
+++ b/demo/spreadsheet-graph.html
@@ -166,8 +166,8 @@
     </folk-shape>
 
     <script type="module">
-      import { FolkShape } from '../src/canvas/folk-shape.ts';
-      import { FolkConnection } from '../src/arrows/folk-connection.ts';
+      import { FolkShape } from '../src/folk-shape.ts';
+      import { FolkConnection } from '../src/folk-connection.ts';
       import { FolkSpreadsheet } from '../src/folk-spreadsheet.ts';
 
       FolkShape.define();
diff --git a/demo/spreadsheet-propagator.html b/demo/spreadsheet-propagator.html
index 4e786cd..41e8d3e 100644
--- a/demo/spreadsheet-propagator.html
+++ b/demo/spreadsheet-propagator.html
@@ -21,7 +21,7 @@
         width: 100%;
       }
 
-      event-propagator {
+      folk-event-propagator {
         display: block;
         position: absolute;
         inset: 0 0 0 0;
@@ -144,37 +144,37 @@
       </folk-spreadsheet>
     </folk-shape>
 
-    <event-propagator
+    <folk-event-propagator
       source="#map1"
       target="folk-cell[column='A'][row='1']"
       triggers="recenter"
       expression="expression: round(from.coordinates.lat, 3)"
-    ></event-propagator>
+    ></folk-event-propagator>
 
-    <event-propagator
+    <folk-event-propagator
       source="#map1"
       target="folk-cell[column='A'][row='2']"
       triggers="recenter"
       expression="expression: round(from.coordinates.lng, 3)"
-    ></event-propagator>
+    ></folk-event-propagator>
 
-    <event-propagator
+    <folk-event-propagator
       source="folk-cell[column='A'][row='3']"
       target="#map2"
       triggers="propagate"
       expression="coordinates: from.value"
-    ></event-propagator>
+    ></folk-event-propagator>
 
     <script type="module">
       import { FolkMap } from '../src/folk-map.ts';
-      import { FolkShape } from '../src/canvas/folk-shape.ts';
-      import { EventPropagator } from '../src/arrows/event-propagator.ts';
+      import { FolkShape } from '../src/folk-shape.ts';
+      import { FolkEventPropagator } from '../src/folk-event-propagator.ts';
       import { FolkSpreadsheet } from '../src/folk-spreadsheet.ts';
 
       FolkMap.define();
       FolkShape.define();
       FolkSpreadsheet.define();
-      EventPropagator.define();
+      FolkEventPropagator.define();
 
       window.round = (number, digits = 0) => {
         const base = Number('1'.padEnd(digits + 1, '0'));
diff --git a/demo/spreadsheet.html b/demo/spreadsheet.html
index a1d4531..739c2a5 100644
--- a/demo/spreadsheet.html
+++ b/demo/spreadsheet.html
@@ -123,7 +123,7 @@
     </folk-shape>
 
     <script type="module">
-      import { FolkShape } from '../src/canvas/folk-shape.ts';
+      import { FolkShape } from '../src/folk-shape.ts';
       import { FolkSpreadsheet } from '../src/folk-spreadsheet.ts';
 
       FolkShape.define();
diff --git a/src/file-system.ts b/demo/src/file-system.ts
similarity index 59%
rename from src/file-system.ts
rename to demo/src/file-system.ts
index b1780a8..35c5e8b 100644
--- a/src/file-system.ts
+++ b/demo/src/file-system.ts
@@ -1,5 +1,3 @@
-import { KeyValueStore } from './indexeddb.ts';
-
 export class FileSaver {
   #id;
   #fileType;
@@ -126,3 +124,82 @@ declare global {
     requestPermission: (args: any) => Promise<string>;
   }
 }
+
+class KeyValueStore<Data> {
+  #db: Promise<IDBDatabase>;
+  #storeName;
+
+  constructor(name = 'keyval-store') {
+    this.#storeName = name;
+    const request = indexedDB.open(name);
+    request.onupgradeneeded = () => request.result.createObjectStore(name);
+
+    this.#db = this.#promisifyRequest(request);
+  }
+
+  #promisifyRequest<T>(transaction: IDBRequest<T>) {
+    return new Promise<T>((resolve, reject) => {
+      transaction.onsuccess = () => resolve(transaction.result);
+      transaction.onerror = () => reject(transaction.error);
+    });
+  }
+
+  #promisifyTransaction(transaction: IDBTransaction) {
+    return new Promise<void>((resolve, reject) => {
+      transaction.oncomplete = () => resolve();
+      transaction.onabort = transaction.onerror = () => reject(transaction.error);
+    });
+  }
+
+  #getStore(mode: 'readonly' | 'readwrite') {
+    return this.#db.then((db) => db.transaction(this.#storeName, mode).objectStore(this.#storeName));
+  }
+
+  get(key: IDBValidKey): Promise<Data | undefined> {
+    return this.#getStore('readonly').then((store) => this.#promisifyRequest(store.get(key)));
+  }
+
+  set(key: IDBValidKey, value: Data) {
+    return this.#getStore('readwrite').then((store) => {
+      store.put(value, key);
+      return this.#promisifyTransaction(store.transaction);
+    });
+  }
+
+  setMany(entries: [IDBValidKey, Data][]) {
+    return this.#getStore('readwrite').then((store) => {
+      entries.forEach((entry) => store.put(entry[1], entry[0]));
+      return this.#promisifyTransaction(store.transaction);
+    });
+  }
+
+  delete(key: IDBValidKey) {
+    return this.#getStore('readwrite').then((store) => {
+      store.delete(key);
+      return this.#promisifyTransaction(store.transaction);
+    });
+  }
+
+  clear() {
+    return this.#getStore('readwrite').then((store) => {
+      store.clear();
+      return this.#promisifyTransaction(store.transaction);
+    });
+  }
+
+  keys() {
+    return this.#getStore('readwrite').then((store) => this.#promisifyRequest(store.getAllKeys()));
+  }
+
+  values(): Promise<Data[]> {
+    return this.#getStore('readwrite').then((store) => this.#promisifyRequest(store.getAll()));
+  }
+
+  entries(): Promise<[IDBValidKey, Data][]> {
+    return this.#getStore('readwrite').then((store) =>
+      Promise.all([this.#promisifyRequest(store.getAllKeys()), this.#promisifyRequest(store.getAll())]).then(
+        ([keys, values]) => keys.map((key, i) => [key, values[i]])
+      )
+    );
+  }
+}
diff --git a/src/music/record-player.ts b/demo/src/record-player.ts
similarity index 100%
rename from src/music/record-player.ts
rename to demo/src/record-player.ts
diff --git a/demo/xanadu.html b/demo/xanadu.html
index 7fb3b4f..527a9d2 100644
--- a/demo/xanadu.html
+++ b/demo/xanadu.html
@@ -202,7 +202,7 @@
 
     <script type="module">
       import { FolkXanadu } from '../src/folk-xanadu.ts';
-      import { FolkShape } from '../src/canvas/folk-shape.ts';
+      import { FolkShape } from '../src/folk-shape.ts';
 
       FolkShape.define();
       FolkXanadu.define();
diff --git a/src/arrows/abstract-arrow.ts b/src/abstract-arrow.ts
similarity index 98%
rename from src/arrows/abstract-arrow.ts
rename to src/abstract-arrow.ts
index 01ee0b1..4b2765f 100644
--- a/src/arrows/abstract-arrow.ts
+++ b/src/abstract-arrow.ts
@@ -1,6 +1,6 @@
-import { FolkShape } from '../canvas/folk-shape.ts';
-import { parseVertex } from './utils.ts';
-import { ClientRectObserverEntry, ClientRectObserverManager } from '../client-rect-observer.ts';
+import { FolkShape } from './folk-shape.ts';
+import { parseVertex } from './common/utils.ts';
+import { ClientRectObserverEntry, ClientRectObserverManager } from './common/client-rect-observer.ts';
 
 const clientRectObserver = new ClientRectObserverManager();
 
diff --git a/src/utils/Vector2.ts b/src/common/Vector2.ts
similarity index 100%
rename from src/utils/Vector2.ts
rename to src/common/Vector2.ts
diff --git a/src/client-rect-observer.ts b/src/common/client-rect-observer.ts
similarity index 100%
rename from src/client-rect-observer.ts
rename to src/common/client-rect-observer.ts
diff --git a/src/collision.ts b/src/common/collision.ts
similarity index 69%
rename from src/collision.ts
rename to src/common/collision.ts
index f1e3b2a..98cb948 100644
--- a/src/collision.ts
+++ b/src/common/collision.ts
@@ -1,4 +1,4 @@
-export function collisionDetection(rect1, rect2, proximity = 0) {
+export function collisionDetection(rect1: DOMRect, rect2: DOMRect, proximity = 0) {
   return (
     rect1.left - rect2.right < proximity &&
     rect2.left - rect1.right < proximity &&
diff --git a/src/arrows/iframe-script.ts b/src/common/iframe-script.ts
similarity index 94%
rename from src/arrows/iframe-script.ts
rename to src/common/iframe-script.ts
index e086004..049b125 100644
--- a/src/arrows/iframe-script.ts
+++ b/src/common/iframe-script.ts
@@ -1,5 +1,5 @@
-import { FolkShape } from '../canvas/folk-shape';
-import { ClientRectObserverManager, ClientRectObserverEntry } from '../client-rect-observer.ts';
+import { FolkShape } from '../folk-shape.ts';
+import { ClientRectObserverManager, ClientRectObserverEntry } from './client-rect-observer.ts';
 
 const clientRectObserver = new ClientRectObserverManager();
 
@@ -38,7 +38,7 @@ class ObservedElements {
     }
   }
 
-  getElement(selector) {
+  getElement(selector: string) {
     return this.#elements.find((e) => e.selector === selector)?.element;
   }
 
@@ -61,11 +61,11 @@ if (window.parent !== window) {
     });
   }
 
-  function onGeometryChange(event) {
+  function onGeometryChange(event: any) {
     window.parent.postMessage({
       type: 'folk-element-change',
       selector: observedSelectors.get(event.target),
-      boundingBox: event.target.getClientRect(),
+      boundingBox: event.target?.getClientRect(),
     });
   }
 
diff --git a/src/utils/tags.ts b/src/common/tags.ts
similarity index 100%
rename from src/utils/tags.ts
rename to src/common/tags.ts
diff --git a/src/arrows/utils.ts b/src/common/utils.ts
similarity index 100%
rename from src/arrows/utils.ts
rename to src/common/utils.ts
diff --git a/src/utils/webgl.ts b/src/common/webgl.ts
similarity index 100%
rename from src/utils/webgl.ts
rename to src/common/webgl.ts
diff --git a/src/distance-field.ts b/src/distance-field.ts
index b39663e..1722e4c 100644
--- a/src/distance-field.ts
+++ b/src/distance-field.ts
@@ -1,6 +1,6 @@
-import { frag, vert } from './utils/tags.ts';
-import { WebGLUtils } from './utils/webgl.ts';
-import type { FolkShape } from './canvas/folk-shape.ts';
+import { frag, vert } from './common/tags.ts';
+import { WebGLUtils } from './common/webgl.ts';
+import type { FolkShape } from './folk-shape.ts';
 
 /**
  * The DistanceField class calculates a distance field using the Jump Flooding Algorithm (JFA) in WebGL.
diff --git a/src/arrows/folk-connection.ts b/src/folk-connection.ts
similarity index 96%
rename from src/arrows/folk-connection.ts
rename to src/folk-connection.ts
index 912fe46..5602616 100644
--- a/src/arrows/folk-connection.ts
+++ b/src/folk-connection.ts
@@ -1,6 +1,6 @@
 import { getBoxToBoxArrow } from 'perfect-arrows';
 import { AbstractArrow } from './abstract-arrow.ts';
-import { getSvgPathFromStroke, pointsOnBezierCurves } from './utils.ts';
+import { getSvgPathFromStroke, pointsOnBezierCurves } from './common/utils.ts';
 import { getStroke, StrokeOptions } from 'perfect-freehand';
 
 export type Arrow = [
diff --git a/src/arrows/event-propagator.ts b/src/folk-event-propagator.ts
similarity index 90%
rename from src/arrows/event-propagator.ts
rename to src/folk-event-propagator.ts
index e48233c..88b6c11 100644
--- a/src/arrows/event-propagator.ts
+++ b/src/folk-event-propagator.ts
@@ -1,26 +1,27 @@
+import { css } from './common/tags.ts';
 import { FolkRope } from './folk-rope.ts';
 
 const styles = new CSSStyleSheet();
-styles.replaceSync(`
-textarea {
-  position: absolute;
-  width: auto;
-  min-width: 3ch;
-  height: auto;
-  resize: none;
-  background: rgba(256, 256, 256, 0.8);
-  border: 1px solid #ccc;
-  padding: 4px;
-  pointer-events: auto;
-  overflow: hidden;
-  field-sizing: content;
-  translate: -50% -50%;
-  border-radius: 5px;
-}  
+styles.replaceSync(css`
+  textarea {
+    position: absolute;
+    width: auto;
+    min-width: 3ch;
+    height: auto;
+    resize: none;
+    background: rgba(256, 256, 256, 0.8);
+    border: 1px solid #ccc;
+    padding: 4px;
+    pointer-events: auto;
+    overflow: hidden;
+    field-sizing: content;
+    translate: -50% -50%;
+    border-radius: 5px;
+  }
 `);
 
-export class EventPropagator extends FolkRope {
-  static override tagName = 'event-propagator';
+export class FolkEventPropagator extends FolkRope {
+  static override tagName = 'folk-event-propagator';
 
   #triggers: string[] = [];
   get triggers() {
diff --git a/src/folk-hull.ts b/src/folk-hull.ts
index 4de0371..c16e1c7 100644
--- a/src/folk-hull.ts
+++ b/src/folk-hull.ts
@@ -1,5 +1,5 @@
 import { FolkSet } from './folk-set';
-import { Vertex, verticesToPolygon } from './arrows/utils';
+import { Vertex, verticesToPolygon } from './common/utils';
 
 declare global {
   interface HTMLElementTagNameMap {
diff --git a/src/folk-metronome.ts b/src/folk-metronome.ts
index a7f20a1..9b72199 100644
--- a/src/folk-metronome.ts
+++ b/src/folk-metronome.ts
@@ -17,7 +17,7 @@ export class FolkMetronome extends HTMLElement {
     this.addEventListener('click', this);
   }
 
-  #timeoutId = -1;
+  #timeoutId: NodeJS.Timeout | -1 = -1;
 
   get isPlaying() {
     return this.#timeoutId !== -1;
diff --git a/src/folk-proximity.ts b/src/folk-proximity.ts
index ad50784..61a290a 100644
--- a/src/folk-proximity.ts
+++ b/src/folk-proximity.ts
@@ -1,6 +1,6 @@
-import { collisionDetection } from './collision';
+import { collisionDetection } from './common/collision.ts';
 import { FolkHull } from './folk-hull';
-import { FolkShape } from './canvas/folk-shape.ts';
+import { FolkShape } from './folk-shape.ts';
 
 interface ElementConstructor<E extends Element = Element> {
   new (): E;
@@ -145,7 +145,7 @@ export class FolkProximity extends HTMLElement {
     this.addEventListener('resize', this.#handleProximity);
   }
 
-  #handleProximity = (e) => {
+  #handleProximity = (e: Event) => {
     const el = e.target as FolkShape;
 
     const cluster = this.#findCluster(el);
@@ -186,7 +186,7 @@ export class FolkProximity extends HTMLElement {
     }
   };
 
-  #findCluster(element) {
+  #findCluster(element: FolkShape) {
     for (const cluster of this.#clusters) {
       if (cluster.isElementInCluster(element)) return cluster;
     }
diff --git a/src/arrows/folk-rope.ts b/src/folk-rope.ts
similarity index 98%
rename from src/arrows/folk-rope.ts
rename to src/folk-rope.ts
index ff5226a..bb46271 100644
--- a/src/arrows/folk-rope.ts
+++ b/src/folk-rope.ts
@@ -1,8 +1,8 @@
 // This is a rewrite of https://github.com/guerrillacontra/html5-es6-physics-rope
 
-import { Vector, type Vector2 } from '../utils/Vector2.ts';
+import { Vector, type Vector2 } from './common/Vector2.ts';
 import { AbstractArrow } from './abstract-arrow.ts';
-import { Vertex } from './utils.ts';
+import { Vertex } from './common/utils.ts';
 
 const lerp = (first: number, second: number, percentage: number) => first + (second - first) * percentage;
 
diff --git a/src/folk-set.ts b/src/folk-set.ts
index e18607c..4801b56 100644
--- a/src/folk-set.ts
+++ b/src/folk-set.ts
@@ -1,4 +1,4 @@
-import { ClientRectObserverEntry, ClientRectObserverManager } from './client-rect-observer.ts';
+import { ClientRectObserverEntry, ClientRectObserverManager } from './common/client-rect-observer.ts';
 
 const clientRectObserver = new ClientRectObserverManager();
 
diff --git a/src/canvas/folk-shape.ts b/src/folk-shape.ts
similarity index 99%
rename from src/canvas/folk-shape.ts
rename to src/folk-shape.ts
index 124b53e..f129fa9 100644
--- a/src/canvas/folk-shape.ts
+++ b/src/folk-shape.ts
@@ -1,4 +1,4 @@
-import { ResizeObserverManager } from '../resize-observer';
+import { ResizeObserverManager } from './resize-observer';
 
 const resizeObserver = new ResizeObserverManager();
 
diff --git a/src/folk-xanadu.ts b/src/folk-xanadu.ts
index 1526029..a1dc11f 100644
--- a/src/folk-xanadu.ts
+++ b/src/folk-xanadu.ts
@@ -1,5 +1,5 @@
-import { AbstractArrow } from './arrows/abstract-arrow.js';
-import { Vertex, verticesToPolygon } from './arrows/utils.js';
+import { AbstractArrow } from './abstract-arrow.js';
+import { Vertex, verticesToPolygon } from './common/utils.js';
 
 export class FolkXanadu extends AbstractArrow {
   static tagName = 'folk-xanadu';
diff --git a/src/indexeddb.ts b/src/indexeddb.ts
deleted file mode 100644
index 56660b0..0000000
--- a/src/indexeddb.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-export class KeyValueStore<Data> {
-  #db: Promise<IDBDatabase>;
-  #storeName;
-
-  constructor(name = 'keyval-store') {
-    this.#storeName = name;
-    const request = indexedDB.open(name);
-    request.onupgradeneeded = () => request.result.createObjectStore(name);
-
-    this.#db = this.#promisifyRequest(request);
-  }
-
-  #promisifyRequest<T>(transaction: IDBRequest<T>) {
-    return new Promise<T>((resolve, reject) => {
-      transaction.onsuccess = () => resolve(transaction.result);
-      transaction.onerror = () => reject(transaction.error);
-    });
-  }
-
-  #promisifyTransaction(transaction: IDBTransaction) {
-    return new Promise<void>((resolve, reject) => {
-      transaction.oncomplete = () => resolve();
-      transaction.onabort = transaction.onerror = () => reject(transaction.error);
-    });
-  }
-
-  #getStore(mode: 'readonly' | 'readwrite') {
-    return this.#db.then((db) => db.transaction(this.#storeName, mode).objectStore(this.#storeName));
-  }
-
-  get(key: IDBValidKey): Promise<Data | undefined> {
-    return this.#getStore('readonly').then((store) => this.#promisifyRequest(store.get(key)));
-  }
-
-  set(key: IDBValidKey, value: Data) {
-    return this.#getStore('readwrite').then((store) => {
-      store.put(value, key);
-      return this.#promisifyTransaction(store.transaction);
-    });
-  }
-
-  setMany(entries: [IDBValidKey, Data][]) {
-    return this.#getStore('readwrite').then((store) => {
-      entries.forEach((entry) => store.put(entry[1], entry[0]));
-      return this.#promisifyTransaction(store.transaction);
-    });
-  }
-
-  delete(key: IDBValidKey) {
-    return this.#getStore('readwrite').then((store) => {
-      store.delete(key);
-      return this.#promisifyTransaction(store.transaction);
-    });
-  }
-
-  clear() {
-    return this.#getStore('readwrite').then((store) => {
-      store.clear();
-      return this.#promisifyTransaction(store.transaction);
-    });
-  }
-
-  keys() {
-    return this.#getStore('readwrite').then((store) => this.#promisifyRequest(store.getAllKeys()));
-  }
-
-  values(): Promise<Data[]> {
-    return this.#getStore('readwrite').then((store) => this.#promisifyRequest(store.getAll()));
-  }
-
-  entries(): Promise<[IDBValidKey, Data][]> {
-    return this.#getStore('readwrite').then((store) =>
-      Promise.all([this.#promisifyRequest(store.getAllKeys()), this.#promisifyRequest(store.getAll())]).then(
-        ([keys, values]) => keys.map((key, i) => [key, values[i]])
-      )
-    );
-  }
-}