folk timer

demo/llm.html

@@ -109,43 +109,12 @@
     <script type="module">
       import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
       import { FolkLLM } from '../src/folk-llm.ts';
+      import { FolkTimer } from '../src/folk-timer.ts';
       import { EventPropagator } from '../src/arrows/event-propagator.ts';
 
       FolkGeometry.register();
       FolkLLM.register();
-
+      FolkTimer.register();
-      customElements.define(
-        'folk-timer',
-        class Timer extends HTMLElement {
-          #timeMs = 0;
-          #intervalMs = 100;
-          #timeoutId = -1;
-
-          connectedCallback() {
-            this.#updateTime(0);
-          }
-
-          start() {
-            this.#timeoutId = setInterval(this.#updateTime, this.#intervalMs);
-          }
-
-          stop() {
-            clearInterval(this.#timeoutId);
-            this.#timeoutId = -1;
-          }
-
-          reset() {
-            this.stop();
-            this.#updateTime(0);
-          }
-
-          #updateTime = (time = this.#timeMs + this.#intervalMs) => {
-            this.#timeMs = time;
-            this.textContent = (time / 1000).toFixed(1);
-          };
-        }
-      );
-
       EventPropagator.register();
     </script>
   </body>

src/folk-timer.ts

@@ -0,0 +1,41 @@
+declare global {
+  interface HTMLElementTagNameMap {
+    'folk-timer': FolkTimer;
+  }
+}
+
+export class FolkTimer extends HTMLElement {
+  static tagName = 'folk-timer';
+
+  static register() {
+    customElements.define(this.tagName, this);
+  }
+
+  #timeMs = 0;
+  #timeoutId = -1;
+
+  #intervalMs = 100;
+
+  connectedCallback() {
+    this.#updateTime(0);
+  }
+
+  start() {
+    this.#timeoutId = setInterval(this.#updateTime, this.#intervalMs);
+  }
+
+  stop() {
+    clearInterval(this.#timeoutId);
+    this.#timeoutId = -1;
+  }
+
+  reset() {
+    this.stop();
+    this.#updateTime(0);
+  }
+
+  #updateTime = (time = this.#timeMs + this.#intervalMs) => {
+    this.#timeMs = time;
+    this.textContent = (time / 1000).toFixed(1);
+  };
+}