renames

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>

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();
 

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 { FolkShape } from '../src/folk-shape.ts';
-      import { FolkConnection } from '../src/arrows/folk-connection.ts';
+      import { FolkConnection } from '../src/folk-connection.ts';
-      import '../src/arrows/iframe-script.ts';
+      import '../src/common/iframe-script.ts';
 
       FolkShape.define();
       FolkConnection.define();

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>

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();
 

demo/chains-of-thought/main.ts

@@ -1,6 +1,6 @@
-import { FolkShape } from '../../src/canvas/folk-shape.ts';
+import { FolkShape } from '../../src/folk-shape.ts';
-import { FolkConnection } from '../../src/arrows/folk-connection.ts';
+import { FolkConnection } from '../../src/folk-connection.ts';
-import { FileSaver } from '../../src/file-system.ts';
+import { FileSaver } from '../src/file-system.ts';
 
 declare global {
   interface HTMLElementTagNameMap {

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 { FolkShape } from '../src/folk-shape.ts';
-      import { collisionDetection } from '../src/collision.ts';
+      import { collisionDetection } from '../src/common/collision.ts';
 
       FolkShape.define();
 

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();
 

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();

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 { FolkShape } from '../src/folk-shape.ts';
-      import { EventPropagator } from '../src/arrows/event-propagator.ts';
+      import { FolkEventPropagator } from '../src/folk-event-propagator.ts';
 
       FolkShape.define();
-      EventPropagator.define();
+      FolkEventPropagator.define();
     </script>
   </body>
 </html>

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();

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 { FolkShape } from '../src/folk-shape.ts';
-      import { FolkRope } from '../src/arrows/folk-rope.ts';
+      import { FolkRope } from '../src/folk-rope.ts';
 
       FolkShape.define();
       FolkRope.define();

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();

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>

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();
 

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';

demo/proximity-music.html

@@ -60,9 +60,9 @@
     </folk-shape>
 
     <script type="module">
-      import { FolkShape } from '../src/canvas/folk-shape.ts';
+      import { FolkShape } from '../src/folk-shape.ts';
-      import { RecordPlayer } from '../src/music/record-player.ts';
+      import { RecordPlayer } from './src/record-player.ts';
-      import { collisionDetection } from '../src/collision.ts';
+      import { collisionDetection } from '../src/common/collision.ts';
 
       FolkShape.define();
       RecordPlayer.define();

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 { FolkShape } from '../src/folk-shape.ts';
-      import { EventPropagator } from '../src/arrows/event-propagator.ts';
+      import { FolkEventPropagator } from '../src/folk-event-propagator.ts';
 
       FolkShape.define();
-      EventPropagator.define();
+      FolkEventPropagator.define();
 
       const ropeMode = document.querySelector('input[type="checkbox"]');
 

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 { FolkShape } from '../src/folk-shape.ts';
-      import { FolkRope } from '../src/arrows/folk-rope.ts';
+      import { FolkRope } from '../src/folk-rope.ts';
 
       FolkShape.define();
       FolkRope.define();

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 { FolkShape } from '../src/folk-shape.ts';
-      import { FolkConnection } from '../src/arrows/folk-connection.ts';
+      import { FolkConnection } from '../src/folk-connection.ts';
 
       FolkShape.define();
       FolkConnection.define();

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>

demo/spreadsheet-graph.html

@@ -166,8 +166,8 @@
     </folk-shape>
 
     <script type="module">
-      import { FolkShape } from '../src/canvas/folk-shape.ts';
+      import { FolkShape } from '../src/folk-shape.ts';
-      import { FolkConnection } from '../src/arrows/folk-connection.ts';
+      import { FolkConnection } from '../src/folk-connection.ts';
       import { FolkSpreadsheet } from '../src/folk-spreadsheet.ts';
 
       FolkShape.define();

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 { FolkShape } from '../src/folk-shape.ts';
-      import { EventPropagator } from '../src/arrows/event-propagator.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'));

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();

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]])
+      )
+    );
+  }
+}

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();

src/abstract-arrow.ts

@@ -1,6 +1,6 @@
-import { FolkShape } from '../canvas/folk-shape.ts';
+import { FolkShape } from './folk-shape.ts';
-import { parseVertex } from './utils.ts';
+import { parseVertex } from './common/utils.ts';
-import { ClientRectObserverEntry, ClientRectObserverManager } from '../client-rect-observer.ts';
+import { ClientRectObserverEntry, ClientRectObserverManager } from './common/client-rect-observer.ts';
 
 const clientRectObserver = new ClientRectObserverManager();
 

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 &&

src/common/iframe-script.ts

@@ -1,5 +1,5 @@
-import { FolkShape } from '../canvas/folk-shape';
+import { FolkShape } from '../folk-shape.ts';
-import { ClientRectObserverManager, ClientRectObserverEntry } from '../client-rect-observer.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(),
     });
   }
 

src/distance-field.ts

@@ -1,6 +1,6 @@
-import { frag, vert } from './utils/tags.ts';
+import { frag, vert } from './common/tags.ts';
-import { WebGLUtils } from './utils/webgl.ts';
+import { WebGLUtils } from './common/webgl.ts';
-import type { FolkShape } from './canvas/folk-shape.ts';
+import type { FolkShape } from './folk-shape.ts';
 
 /**
  * The DistanceField class calculates a distance field using the Jump Flooding Algorithm (JFA) in WebGL.

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 = [

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(`
+styles.replaceSync(css`
-textarea {
+  textarea {
-  position: absolute;
+    position: absolute;
-  width: auto;
+    width: auto;
-  min-width: 3ch;
+    min-width: 3ch;
-  height: auto;
+    height: auto;
-  resize: none;
+    resize: none;
-  background: rgba(256, 256, 256, 0.8);
+    background: rgba(256, 256, 256, 0.8);
-  border: 1px solid #ccc;
+    border: 1px solid #ccc;
-  padding: 4px;
+    padding: 4px;
-  pointer-events: auto;
+    pointer-events: auto;
-  overflow: hidden;
+    overflow: hidden;
-  field-sizing: content;
+    field-sizing: content;
-  translate: -50% -50%;
+    translate: -50% -50%;
-  border-radius: 5px;
+    border-radius: 5px;
-}  
+  }
 `);
 
-export class EventPropagator extends FolkRope {
+export class FolkEventPropagator extends FolkRope {
-  static override tagName = 'event-propagator';
+  static override tagName = 'folk-event-propagator';
 
   #triggers: string[] = [];
   get triggers() {

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 {

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;

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;
     }

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;
 

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();
 

src/folk-shape.ts

@@ -1,4 +1,4 @@
-import { ResizeObserverManager } from '../resize-observer';
+import { ResizeObserverManager } from './resize-observer';
 
 const resizeObserver = new ResizeObserverManager();
 

src/folk-xanadu.ts

@@ -1,5 +1,5 @@
-import { AbstractArrow } from './arrows/abstract-arrow.js';
+import { AbstractArrow } from './abstract-arrow.js';
-import { Vertex, verticesToPolygon } from './arrows/utils.js';
+import { Vertex, verticesToPolygon } from './common/utils.js';
 
 export class FolkXanadu extends AbstractArrow {
   static tagName = 'folk-xanadu';

src/indexeddb.ts

@@ -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]])
-      )
-    );
-  }
-}