From 862174a8bb7a3ffb93f1cb301f19d064523851aa Mon Sep 17 00:00:00 2001
From: Orion Reed <orionreedt@gmail.com>
Date: Wed, 30 Oct 2024 02:18:27 -0400
Subject: [PATCH] rename spatial to fc/folk

---
 demo/arrows.html                              | 20 ++--
 demo/canvasify.html                           | 96 +++++++++++--------
 demo/chains-of-thought/index.html             |  6 +-
 demo/chains-of-thought/main.ts                | 81 +++++++++-------
 demo/collision.html                           | 24 +++--
 demo/event-propagator.html                    | 16 ++--
 demo/index.html                               |  4 +-
 demo/ink.html                                 | 12 +--
 demo/maps.html                                | 50 +++++++---
 demo/music.html                               | 30 +++---
 demo/perf.html                                |  8 +-
 demo/shapes.html                              | 14 +--
 demo/spreadsheet.html                         | 17 ++--
 src/arrows/event-propagator.ts                |  4 +-
 ...spatial-connection.ts => fc-connection.ts} |  6 +-
 src/canvas/fc-canvas.ts                       |  7 ++
 .../{spatial-geometry.ts => fc-geometry.ts}   |  6 +-
 src/canvas/{spatial-ink.ts => fc-ink.ts}      | 19 ++--
 src/canvas/spatial-canvas.ts                  |  7 --
 19 files changed, 249 insertions(+), 178 deletions(-)
 rename src/arrows/{spatial-connection.ts => fc-connection.ts} (94%)
 create mode 100644 src/canvas/fc-canvas.ts
 rename src/canvas/{spatial-geometry.ts => fc-geometry.ts} (99%)
 rename src/canvas/{spatial-ink.ts => fc-ink.ts} (92%)
 delete mode 100644 src/canvas/spatial-canvas.ts
diff --git a/demo/arrows.html b/demo/arrows.html
index aa6aa63..72db41b 100644
--- a/demo/arrows.html
+++ b/demo/arrows.html
@@ -15,12 +15,12 @@
         margin: 0;
       }
 
-      spatial-geometry {
+      fc-geometry {
         border: 1px solid black;
         border-radius: 3px;
       }
 
-      spatial-connection {
+      fc-connection {
         display: block;
         position: absolute;
         inset: 0 0 0 0;
@@ -32,18 +32,18 @@
     </style>
   </head>
   <body>
-    <spatial-geometry id="box1" x="100" y="100" width="50" height="50"></spatial-geometry>
-    <spatial-geometry id="box2" x="200" y="300">Hello World</spatial-geometry>
-    <spatial-connection source="#box1" target="#box2"></spatial-connection>
+    <fc-geometry id="box1" x="100" y="100" width="50" height="50"></fc-geometry>
+    <fc-geometry id="box2" x="200" y="300">Hello World</fc-geometry>
+    <fc-connection source="#box1" target="#box2"></fc-connection>
 
-    <spatial-connection source="#box1" target="400,100"></spatial-connection>
+    <fc-connection source="#box1" target="400,100"></fc-connection>
 
     <script type="module">
-      import { SpatialGeometry } from '../src/canvas/spatial-geometry.ts';
-      import { SpatialConnection } from '../src/arrows/spatial-connection.ts';
+      import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
+      import { FolkConnection } from '../src/arrows/fc-connection.ts';
 
-      SpatialGeometry.register();
-      SpatialConnection.register();
+      FolkGeometry.register();
+      FolkConnection.register();
     </script>
   </body>
 </html>
diff --git a/demo/canvasify.html b/demo/canvasify.html
index 2c50dc4..94afa50 100644
--- a/demo/canvasify.html
+++ b/demo/canvasify.html
@@ -35,7 +35,7 @@
         font-style: italic;
       }
 
-      spatial-geometry {
+      fc-geometry {
         z-index: 2;
       }
     </style>
@@ -45,64 +45,77 @@
       <h1>My article</h1>
       <p>
         <span
-          >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-          magna aliqua.</span
+          >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua.</span
         >
-        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
-        aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-        occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
+        ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
+        qui officia deserunt mollit anim id est laborum.
       </p>
       <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
-        laborum.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        mollit anim id est laborum.
       </p>
       <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
-        laborum.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        mollit anim id est laborum.
       </p>
       <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur.
         <span
-          >Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
-          laborum.</span
+          >Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+          officia deserunt mollit anim id est laborum.</span
         >
       </p>
       <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
-        laborum.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        mollit anim id est laborum.
       </p>
       <p>
-        Lorem ipsum dolor sit amet,>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
-        laborum.
+        Lorem ipsum dolor sit amet,>consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        mollit anim id est laborum.
       </p>
       <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
-        laborum.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        mollit anim id est laborum.
       </p>
     </main>
 
     <script type="module">
-      import { SpatialGeometry } from '../src/canvas/spatial-geometry.ts';
+      import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
 
-      SpatialGeometry.register();
+      FolkGeometry.register();
 
       function copyStyles(from, to) {
         const styles = getComputedStyle(from);
@@ -115,7 +128,8 @@
       }
 
       document.addEventListener('click', ({ target }) => {
-        if (target.closest('spatial-geometry') || target.matches('body, html')) return;
+        if (target.closest('fc-geometry') || target.matches('body, html'))
+          return;
 
         const rect = target.getBoundingClientRect();
 
@@ -133,7 +147,7 @@
           copyStyles(el, copiedElements[i]);
         });
 
-        const geometry = document.createElement('spatial-geometry');
+        const geometry = document.createElement('fc-geometry');
         geometry.x = rect.x;
         geometry.y = rect.y;
         geometry.height = rect.height;
diff --git a/demo/chains-of-thought/index.html b/demo/chains-of-thought/index.html
index 4832094..db6dd2d 100644
--- a/demo/chains-of-thought/index.html
+++ b/demo/chains-of-thought/index.html
@@ -36,13 +36,13 @@
         }
       }
 
-      spatial-connection {
+      fc-connection {
         display: block;
         position: absolute;
         inset: 0 0 0 0;
       }
 
-      spatial-geometry {
+      fc-geometry {
         border-radius: 7px;
 
         &::part(rotate),
@@ -53,7 +53,7 @@
           display: none;
         }
 
-        spatial-thought {
+        fc-thought {
           background-color: white;
           border-radius: 6px;
           border: solid 1px light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
diff --git a/demo/chains-of-thought/main.ts b/demo/chains-of-thought/main.ts
index 8225c91..8518a0d 100644
--- a/demo/chains-of-thought/main.ts
+++ b/demo/chains-of-thought/main.ts
@@ -1,24 +1,26 @@
-import { SpatialGeometry } from '../../src/canvas/spatial-geometry.ts';
-import { SpatialConnection } from '../../src/arrows/spatial-connection.ts';
+import { FolkGeometry } from '../../src/canvas/fc-geometry.ts';
+import { FolkConnection } from '../../src/arrows/fc-connection.ts';
 import { FileSaver } from '../../src/persistence/file.ts';
 
 declare global {
   interface HTMLElementTagNameMap {
-    'spatial-thought': SpatialThought;
+    'fc-thought': FolkThought;
   }
 }
 
-class SpatialThought extends HTMLElement {
-  static tagName = 'spatial-thought';
+class FolkThought extends HTMLElement {
+  static tagName = 'fc-thought';
 
   static register() {
     customElements.define(this.tagName, this);
   }
 
-  #deleteButton = this.querySelector('button[name="delete"]') as HTMLButtonElement;
+  #deleteButton = this.querySelector(
+    'button[name="delete"]'
+  ) as HTMLButtonElement;
   #text = this.querySelector('[name="text"]') as HTMLElement;
 
-  #geometry = this.parentElement as SpatialGeometry;
+  #geometry = this.parentElement as FolkGeometry;
 
   constructor() {
     super();
@@ -36,17 +38,17 @@ class SpatialThought extends HTMLElement {
 
       document
         .querySelectorAll(
-          `spatial-connection[source="spatial-geometry[id='${this.#geometry.id}']"], 
-          spatial-connection[target="spatial-geometry[id='${this.#geometry.id}']"]`
+          `fc-connection[source="fc-geometry[id='${this.#geometry.id}']"], 
+          fc-connection[target="fc-geometry[id='${this.#geometry.id}']"]`
         )
         .forEach((el) => el.remove());
     }
   }
 }
 
-SpatialGeometry.register();
-SpatialThought.register();
-SpatialConnection.register();
+FolkGeometry.register();
+FolkThought.register();
+FolkConnection.register();
 
 interface Thought {
   id: string;
@@ -68,41 +70,48 @@ interface ChainOfThought {
 const html = String.raw;
 
 function parseHTML(html: string): Element {
-  return document.createRange().createContextualFragment(html).firstElementChild!;
+  return document.createRange().createContextualFragment(html)
+    .firstElementChild!;
 }
 
 function renderThought({ id, x, y, text }: Thought) {
-  return html`<spatial-geometry id="${id}" x="${x}" y="${y}">
-    <spatial-thought>
+  return html`<fc-geometry id="${id}" x="${x}" y="${y}">
+    <fc-thought>
       <div contenteditable="true" name="text">${text}</div>
       <button name="delete">␡</button>
-    </spatial-thought>
-  </spatial-geometry>`;
+    </fc-thought>
+  </fc-geometry>`;
 }
 
 function renderConnection({ sourceId, targetId }: Connection) {
-  return html`<spatial-connection
-    source="spatial-geometry[id='${sourceId}']"
-    target="spatial-geometry[id='${targetId}']"
-  ></spatial-connection>`;
+  return html`<fc-connection
+    source="fc-geometry[id='${sourceId}']"
+    target="fc-geometry[id='${targetId}']"
+  ></fc-connection>`;
 }
 
 function renderChainOfThought({ thoughts, connections }: ChainOfThought) {
-  return html`${thoughts.map(renderThought).join('')}${connections.map(renderConnection).join('')}`;
+  return html`${thoughts.map(renderThought).join('')}${connections
+    .map(renderConnection)
+    .join('')}`;
 }
 
 function parseChainOfThought(): ChainOfThought {
   return {
-    thoughts: Array.from(document.querySelectorAll('spatial-geometry')).map((el) => ({
-      id: el.id,
-      text: (el.firstElementChild as SpatialThought).text,
-      x: el.x,
-      y: el.y,
-    })),
-    connections: Array.from(document.querySelectorAll('spatial-connection')).map((el) => ({
-      sourceId: (el.sourceElement as SpatialGeometry).id,
-      targetId: (el.targetElement as SpatialGeometry).id,
-    })),
+    thoughts: Array.from(document.querySelectorAll('fc-geometry')).map(
+      (el) => ({
+        id: el.id,
+        text: (el.firstElementChild as FolkThought).text,
+        x: el.x,
+        y: el.y,
+      })
+    ),
+    connections: Array.from(document.querySelectorAll('fc-connection')).map(
+      (el) => ({
+        sourceId: (el.sourceElement as FolkGeometry).id,
+        targetId: (el.targetElement as FolkGeometry).id,
+      })
+    ),
   };
 }
 
@@ -110,14 +119,18 @@ const openButton = document.querySelector('button[name="open"]')!;
 const saveButton = document.querySelector('button[name="save"]')!;
 const saveAsButton = document.querySelector('button[name="save-as"]')!;
 const main = document.querySelector('main')!;
-const fileSaver = new FileSaver('chains-of-thought', 'json', 'application/json');
+const fileSaver = new FileSaver(
+  'chains-of-thought',
+  'json',
+  'application/json'
+);
 
 main.addEventListener('dblclick', (e) => {
   if (e.target === main) {
     main.appendChild(
       parseHTML(
         renderThought({
-          id: String(document.querySelectorAll('spatial-thought').length + 1),
+          id: String(document.querySelectorAll('fc-thought').length + 1),
           text: '',
           x: e.clientX,
           y: e.clientY,
diff --git a/demo/collision.html b/demo/collision.html
index 9b3534a..a93681d 100644
--- a/demo/collision.html
+++ b/demo/collision.html
@@ -19,24 +19,27 @@
         margin: 0;
       }
 
-      spatial-geometry {
+      fc-geometry {
         border: 2px solid black;
       }
     </style>
   </head>
   <body>
-    <spatial-geometry x="100" y="100" width="50" height="50"></spatial-geometry>
-    <spatial-geometry x="200" y="200" width="50" height="50"></spatial-geometry>
+    <fc-geometry x="100" y="100" width="50" height="50"></fc-geometry>
+    <fc-geometry x="200" y="200" width="50" height="50"></fc-geometry>
 
     <script type="module">
-      import { SpatialGeometry } from '../src/canvas/spatial-geometry.ts';
+      import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
 
-      SpatialGeometry.register();
-      const geometryElements = document.querySelectorAll('spatial-geometry');
+      FolkGeometry.register();
+      const geometryElements = document.querySelectorAll('fc-geometry');
 
       function collisionDetection(rect1, rect2) {
         return (
-          rect1.left < rect2.right && rect1.right > rect2.left && rect1.top < rect2.bottom && rect1.bottom > rect2.top
+          rect1.left < rect2.right &&
+          rect1.right > rect2.left &&
+          rect1.top < rect2.bottom &&
+          rect1.bottom > rect2.top
         );
       }
 
@@ -46,7 +49,12 @@
             el !== e.target &&
             collisionDetection(
               // TODO: refactor this hack once resizing and the vertices API are figured out
-              DOMRectReadOnly.fromRect({ x: el.x, y: el.y, height: el.height, width: el.width }),
+              DOMRectReadOnly.fromRect({
+                x: el.x,
+                y: el.y,
+                height: el.height,
+                width: el.width,
+              }),
               DOMRectReadOnly.fromRect({
                 x: e.target.x,
                 y: e.target.y,
diff --git a/demo/event-propagator.html b/demo/event-propagator.html
index 26a9ee4..9563c0b 100644
--- a/demo/event-propagator.html
+++ b/demo/event-propagator.html
@@ -15,7 +15,7 @@
         margin: 0;
       }
 
-      spatial-geometry {
+      fc-geometry {
         border: 1px solid black;
         border-radius: 3px;
       }
@@ -28,8 +28,10 @@
     </style>
   </head>
   <body>
-    <spatial-geometry id="box1" x="100" y="100" width="50" height="50"></spatial-geometry>
-    <spatial-geometry id="box2" x="200" y="300" width="50" height="50">Hello World</spatial-geometry>
+    <fc-geometry id="box1" x="100" y="100" width="50" height="50"></fc-geometry>
+    <fc-geometry id="box2" x="200" y="300" width="50" height="50"
+      >Hello World</fc-geometry
+    >
     <event-propagator
       source="#box1"
       target="#box2"
@@ -37,8 +39,8 @@
       expression="$target.textContent += '!'"
     ></event-propagator>
 
-    <spatial-geometry id="box3" x="150" y="200" width="50" height="50"></spatial-geometry>
-    <spatial-geometry id="box4" x="300" y="350" width="50" height="50"></spatial-geometry>
+    <fc-geometry id="box3" x="150" y="200" width="50" height="50"></fc-geometry>
+    <fc-geometry id="box4" x="300" y="350" width="50" height="50"></fc-geometry>
     <event-propagator
       source="#box3"
       target="#box4"
@@ -47,10 +49,10 @@
     ></event-propagator>
 
     <script type="module">
-      import { SpatialGeometry } from '../src/canvas/spatial-geometry.ts';
+      import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
       import { EventPropagator } from '../src/arrows/event-propagator.ts';
 
-      SpatialGeometry.register();
+      FolkGeometry.register();
       EventPropagator.register();
     </script>
   </body>
diff --git a/demo/index.html b/demo/index.html
index 7d1c55e..827ecb7 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Spatial Canvas Primitives</title>
+    <title>Folk Canvas Primitives</title>
     <style>
       html {
         height: 100%;
@@ -16,7 +16,7 @@
     </style>
   </head>
   <body>
-    <h1>Spatial Canvas Primitives</h1>
+    <h1>Folk Canvas Primitives</h1>
 
     <ul>
       <li><a href="/shapes">Shapes</a></li>
diff --git a/demo/ink.html b/demo/ink.html
index c642afd..8a0642e 100644
--- a/demo/ink.html
+++ b/demo/ink.html
@@ -21,11 +21,11 @@
       <button on:click="DRAW">Draw</button>
     </nav>
     <script type="module">
-      import { SpatialGeometry } from '../src/canvas/spatial-geometry.ts';
-      import { SpatialInk } from '../src/canvas/spatial-ink.ts';
+      import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
+      import { FolkInk } from '../src/canvas/fc-ink.ts';
 
-      SpatialGeometry.register();
-      SpatialInk.register();
+      FolkGeometry.register();
+      FolkInk.register();
 
       const drawButton = document.querySelector('button');
 
@@ -36,7 +36,7 @@
         e.preventDefault();
         e.stopPropagation();
 
-        const ink = document.createElement('spatial-ink');
+        const ink = document.createElement('fc-ink');
 
         document.body.appendChild(ink);
 
@@ -45,7 +45,7 @@
 
         ink.points = ink.points.map(([x, y, p]) => [x - rect.x, y - rect.y, p]);
 
-        const geometry = document.createElement('spatial-geometry');
+        const geometry = document.createElement('fc-geometry');
         geometry.x = rect.x;
         geometry.y = rect.y;
         geometry.height = rect.height;
diff --git a/demo/maps.html b/demo/maps.html
index 198b0c8..a64bd16 100644
--- a/demo/maps.html
+++ b/demo/maps.html
@@ -37,27 +37,35 @@
     </style>
   </head>
   <body>
-    <spatial-geometry x="25" y="100" width="400" height="200">
+    <fc-geometry x="25" y="100" width="400" height="200">
       <leaflet-map coordinates="52.09, 5.12" zoom="13"></leaflet-map>
-    </spatial-geometry>
+    </fc-geometry>
 
-    <spatial-geometry x="50" y="550" width="400" height="250">
-      <leaflet-map coordinates="51.50404120260676, -0.14007568359375003" zoom="13"></leaflet-map>
-    </spatial-geometry>
+    <fc-geometry x="50" y="550" width="400" height="250">
+      <leaflet-map
+        coordinates="51.50404120260676, -0.14007568359375003"
+        zoom="13"
+      ></leaflet-map>
+    </fc-geometry>
 
-    <spatial-geometry x="500" y="400" width="500" height="300">
-      <geo-wiki coordinates="51.50404120260676, -0.14007568359375003"></geo-wiki>
-    </spatial-geometry>
+    <fc-geometry x="500" y="400" width="500" height="300">
+      <geo-wiki
+        coordinates="51.50404120260676, -0.14007568359375003"
+      ></geo-wiki>
+    </fc-geometry>
 
     <script type="module">
-      import { SpatialGeometry } from '../src/canvas/spatial-geometry.ts';
+      import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
       import { LeafletMap } from '../src/maps';
-      SpatialGeometry.register();
+      FolkGeometry.register();
       LeafletMap.register();
 
       function collisionDetection(rect1, rect2) {
         return (
-          rect1.left < rect2.right && rect1.right > rect2.left && rect1.top < rect2.bottom && rect1.bottom > rect2.top
+          rect1.left < rect2.right &&
+          rect1.right > rect2.left &&
+          rect1.top < rect2.bottom &&
+          rect1.bottom > rect2.top
         );
       }
 
@@ -74,7 +82,10 @@
       }
 
       const proximityMap = new Map(
-        Array.from(document.querySelectorAll('spatial-geometry')).map((el) => [el, new Set()])
+        Array.from(document.querySelectorAll('fc-geometry')).map((el) => [
+          el,
+          new Set(),
+        ])
       );
 
       function handleProximity(e) {
@@ -83,7 +94,12 @@
             const alreadyIntersection = set.has(e.target);
             // TODO: refactor this hack once resizing and the vertices API are figured out
             const isNowIntersecting = proximityDetection(
-              DOMRectReadOnly.fromRect({ x: el.x, y: el.y, height: el.height, width: el.width }),
+              DOMRectReadOnly.fromRect({
+                x: el.x,
+                y: el.y,
+                height: el.height,
+                width: el.width,
+              }),
               DOMRectReadOnly.fromRect({
                 x: e.target.x,
                 y: e.target.y,
@@ -136,7 +152,9 @@
 
         attributeChangedCallback(name, oldValue, newValue) {
           if (name === 'coordinates') {
-            this.#coordinates = newValue.split(',').map((str) => Number(str)) || [0, 0];
+            this.#coordinates = newValue
+              .split(',')
+              .map((str) => Number(str)) || [0, 0];
             this.searchWiki(this.#coordinates);
           }
         }
@@ -152,7 +170,9 @@
             origin: '*',
           });
           // https://www.mediawiki.org/wiki/API:Geosearch
-          this.#results = await fetch(`https://en.wikipedia.org/w/api.php?${params}`)
+          this.#results = await fetch(
+            `https://en.wikipedia.org/w/api.php?${params}`
+          )
             .then((response) => response.json())
             .then((data) => data?.query?.geosearch ?? []);
 
diff --git a/demo/music.html b/demo/music.html
index 2e187e7..2569ebc 100644
--- a/demo/music.html
+++ b/demo/music.html
@@ -15,7 +15,7 @@
         margin: 0;
       }
 
-      spatial-geometry:has(record-player) {
+      fc-geometry:has(record-player) {
         &::part(resize-nw),
         &::part(resize-ne),
         &::part(resize-se),
@@ -24,7 +24,7 @@
         }
       }
 
-      spatial-geometry > video {
+      fc-geometry > video {
         height: 100%;
       }
     </style>
@@ -35,45 +35,47 @@
       ffmpeg -framerate 25 -pattern_type glob -i '*.png' -c:v prores -pix_fmt yuva444p10le dancing-flower.mov
       ffmpeg -framerate 25 -f image2 -pattern_type glob -i '*.png' -c:v libvpx-vp9 -pix_fmt yuva420p dancing-flowers.webm
     -->
-    <spatial-geometry x="100" y="75" width="330" height="198">
+    <fc-geometry x="100" y="75" width="330" height="198">
       <record-player>
         <audio src="/Feather.mp3"></audio>
       </record-player>
-    </spatial-geometry>
+    </fc-geometry>
 
-    <spatial-geometry x="25" y="300" width="166" height="200">
+    <fc-geometry x="25" y="300" width="166" height="200">
       <video loop>
         <source src="/dancing-flower.mov" type="video/quicktime" />
         <source src="/dancing-flower.webm" type="video/webm" />
       </video>
-    </spatial-geometry>
+    </fc-geometry>
 
-    <spatial-geometry x="155" y="315" width="166" height="200">
+    <fc-geometry x="155" y="315" width="166" height="200">
       <video loop>
         <source src="/dancing-flower.mov" type="video/quicktime" />
         <source src="/dancing-flower.webm" type="video/webm" />
       </video>
-    </spatial-geometry>
+    </fc-geometry>
 
-    <spatial-geometry x="280" y="305" width="166" height="200">
+    <fc-geometry x="280" y="305" width="166" height="200">
       <video loop>
         <source src="/dancing-flower.mov" type="video/quicktime" />
         <source src="/dancing-flower.webm" type="video/webm" />
       </video>
-    </spatial-geometry>
+    </fc-geometry>
 
     <script type="module">
-      import { SpatialGeometry } from '../src/canvas/spatial-geometry.ts';
+      import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
       import { RecordPlayer } from '../src/music/record-player.ts';
 
-      SpatialGeometry.register();
+      FolkGeometry.register();
       RecordPlayer.register();
 
       let proximityDistance = 200;
       const proximitySet = new Set();
-      const recordPlayerGeometry = document.querySelector('spatial-geometry:has(record-player)');
+      const recordPlayerGeometry = document.querySelector(
+        'fc-geometry:has(record-player)'
+      );
       const recordPlayer = recordPlayerGeometry.firstElementChild;
-      const flowers = document.querySelectorAll('spatial-geometry:has(video)');
+      const flowers = document.querySelectorAll('fc-geometry:has(video)');
       // set playback rate when video is ready
       function setPlayback(e) {
         e.target.playbackRate = (91 / 60) * e.target.duration;
diff --git a/demo/perf.html b/demo/perf.html
index a682195..953b72b 100644
--- a/demo/perf.html
+++ b/demo/perf.html
@@ -15,23 +15,23 @@
         margin: 0;
       }
 
-      spatial-geometry {
+      fc-geometry {
         border: 2px solid black;
       }
     </style>
   </head>
   <body>
     <script type="module">
-      import { SpatialGeometry } from '../src/canvas/spatial-geometry.ts';
+      import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
 
-      SpatialGeometry.register();
+      FolkGeometry.register();
 
       const geometries = [];
 
       const now = performance.now();
       for (let i = 0; i < 100; i++) {
         for (let j = 0; j < 100; j++) {
-          const geo = document.createElement('spatial-geometry');
+          const geo = document.createElement('fc-geometry');
           geo.x = 50 * i;
           geo.y = 50 * j;
           geo.width = geo.height = 45;
diff --git a/demo/shapes.html b/demo/shapes.html
index a1a4f80..c212694 100644
--- a/demo/shapes.html
+++ b/demo/shapes.html
@@ -15,27 +15,27 @@
         margin: 0;
       }
 
-      spatial-geometry {
+      fc-geometry {
         background: rgb(187, 178, 178);
         box-shadow: rgba(0, 0, 0, 0.2) 1.95px 1.95px 2.6px;
         transition: scale 100ms ease-out, box-shadow 100ms ease-out;
       }
 
-      spatial-geometry:state(move) {
+      fc-geometry:state(move) {
         scale: 1.05;
         box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
       }
     </style>
   </head>
   <body>
-    <spatial-geometry x="100" y="100" width="50" height="50"></spatial-geometry>
-    <spatial-geometry x="100" y="200" width="50" height="50"></spatial-geometry>
-    <spatial-geometry x="100" y="300" width="50" height="50"></spatial-geometry>
+    <fc-geometry x="100" y="100" width="50" height="50"></fc-geometry>
+    <fc-geometry x="100" y="200" width="50" height="50"></fc-geometry>
+    <fc-geometry x="100" y="300" width="50" height="50"></fc-geometry>
 
     <script type="module">
-      import { SpatialGeometry } from '../src/canvas/spatial-geometry.ts';
+      import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
 
-      SpatialGeometry.register();
+      FolkGeometry.register();
     </script>
   </body>
 </html>
diff --git a/demo/spreadsheet.html b/demo/spreadsheet.html
index a2daa9d..0e12e92 100644
--- a/demo/spreadsheet.html
+++ b/demo/spreadsheet.html
@@ -22,21 +22,26 @@
     </style>
   </head>
   <body>
-    <spatial-geometry x="50" y="50" height="300" width="500">
+    <fc-geometry x="50" y="50" height="300" width="500">
       <s-table></s-table>
-    </spatial-geometry>
+    </fc-geometry>
 
     <script type="module">
-      import { SpatialGeometry } from '../src/canvas/spatial-geometry.ts';
-      import { SpreadsheetTable, SpreadsheetHeader, SpreadsheetCell } from '../src/spreadsheet/spreadsheet.ts';
+      import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
+      import {
+        SpreadsheetTable,
+        SpreadsheetHeader,
+        SpreadsheetCell,
+      } from '../src/spreadsheet/spreadsheet.ts';
 
-      SpatialGeometry.register();
+      FolkGeometry.register();
       SpreadsheetTable.register();
       SpreadsheetHeader.register();
       SpreadsheetCell.register();
 
       document.querySelector(`s-cell[column="A"][row="1"]`).expression = '1';
-      document.querySelector(`s-cell[column="A"][row="2"]`).expression = '$A1 * 2';
+      document.querySelector(`s-cell[column="A"][row="2"]`).expression =
+        '$A1 * 2';
     </script>
   </body>
 </html>
diff --git a/src/arrows/event-propagator.ts b/src/arrows/event-propagator.ts
index ae0e25e..d032bb1 100644
--- a/src/arrows/event-propagator.ts
+++ b/src/arrows/event-propagator.ts
@@ -1,6 +1,6 @@
-import { SpatialConnection } from './spatial-connection';
+import { FolkConnection } from './fc-connection';
 
-export class EventPropagator extends SpatialConnection {
+export class EventPropagator extends FolkConnection {
   static tagName = 'event-propagator';
 
   #triggers = (this.getAttribute('triggers') || '').split(',');
diff --git a/src/arrows/spatial-connection.ts b/src/arrows/fc-connection.ts
similarity index 94%
rename from src/arrows/spatial-connection.ts
rename to src/arrows/fc-connection.ts
index 410616e..c897ae1 100644
--- a/src/arrows/spatial-connection.ts
+++ b/src/arrows/fc-connection.ts
@@ -26,12 +26,12 @@ export type Arrow = [
 
 declare global {
   interface HTMLElementTagNameMap {
-    'spatial-connection': SpatialConnection;
+    'fc-connection': FolkConnection;
   }
 }
 
-export class SpatialConnection extends AbstractArrow {
-  static tagName = 'spatial-connection';
+export class FolkConnection extends AbstractArrow {
+  static tagName = 'fc-connection';
 
   #options: StrokeOptions = {
     size: 7,
diff --git a/src/canvas/fc-canvas.ts b/src/canvas/fc-canvas.ts
new file mode 100644
index 0000000..73edb3c
--- /dev/null
+++ b/src/canvas/fc-canvas.ts
@@ -0,0 +1,7 @@
+export class FCSpace extends HTMLElement {
+  static tagName = 'fc-space';
+
+  static register() {
+    customElements.define(this.tagName, this);
+  }
+}
diff --git a/src/canvas/spatial-geometry.ts b/src/canvas/fc-geometry.ts
similarity index 99%
rename from src/canvas/spatial-geometry.ts
rename to src/canvas/fc-geometry.ts
index ec1f39e..3706510 100644
--- a/src/canvas/spatial-geometry.ts
+++ b/src/canvas/fc-geometry.ts
@@ -180,13 +180,13 @@ styles.replaceSync(`
 
 declare global {
   interface HTMLElementTagNameMap {
-    'spatial-geometry': SpatialGeometry;
+    'fc-geometry': FolkGeometry;
   }
 }
 
 // TODO: add z coordinate?
-export class SpatialGeometry extends HTMLElement {
-  static tagName = 'spatial-geometry';
+export class FolkGeometry extends HTMLElement {
+  static tagName = 'fc-geometry';
 
   static register() {
     customElements.define(this.tagName, this);
diff --git a/src/canvas/spatial-ink.ts b/src/canvas/fc-ink.ts
similarity index 92%
rename from src/canvas/spatial-ink.ts
rename to src/canvas/fc-ink.ts
index 4ca9446..6a20631 100644
--- a/src/canvas/spatial-ink.ts
+++ b/src/canvas/fc-ink.ts
@@ -25,12 +25,12 @@ styles.replaceSync(`
 
 declare global {
   interface HTMLElementTagNameMap {
-    'spatial-ink': SpatialInk;
+    'fc-ink': FolkInk;
   }
 }
 
-export class SpatialInk extends HTMLElement {
-  static tagName = 'spatial-ink';
+export class FolkInk extends HTMLElement {
+  static tagName = 'fc-ink';
 
   static register() {
     customElements.define(this.tagName, this);
@@ -81,7 +81,8 @@ export class SpatialInk extends HTMLElement {
     this.#update();
   }
 
-  #simulatePressure = this.getAttribute('streamline') === 'false' ? false : true;
+  #simulatePressure =
+    this.getAttribute('streamline') === 'false' ? false : true;
 
   get simulatePressure() {
     return this.#simulatePressure;
@@ -104,7 +105,10 @@ export class SpatialInk extends HTMLElement {
   constructor() {
     super();
 
-    const shadowRoot = this.attachShadow({ mode: 'open', delegatesFocus: true });
+    const shadowRoot = this.attachShadow({
+      mode: 'open',
+      delegatesFocus: true,
+    });
     shadowRoot.adoptedStyleSheets.push(styles);
     this.#svg.appendChild(this.#path);
     shadowRoot.appendChild(this.#svg);
@@ -189,7 +193,10 @@ export class SpatialInk extends HTMLElement {
         cap: true,
       },
     };
-    this.#path.setAttribute('d', this.#getSvgPathFromStroke(getStroke(this.#points, options)));
+    this.#path.setAttribute(
+      'd',
+      this.#getSvgPathFromStroke(getStroke(this.#points, options))
+    );
   }
 
   #getSvgPathFromStroke(stroke: Stroke): string {
diff --git a/src/canvas/spatial-canvas.ts b/src/canvas/spatial-canvas.ts
deleted file mode 100644
index cb90d79..0000000
--- a/src/canvas/spatial-canvas.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export class SpatialCanvas extends HTMLElement {
-  static tagName = 'spatial-canvas';
-
-  static register() {
-    customElements.define(this.tagName, this);
-  }
-}
