diff --git a/bundle.js b/bundle.js
index a7afec6..41a6c22 100644
--- a/bundle.js
+++ b/bundle.js
@@ -1,14 +1,94 @@
 (() => {
-  // https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/geometry/constants.ts
+  // lib/context.ts
+  var contextStack = [];
+  var defaultContext = {};
+  function setDefaultContext(context) {
+    Object.assign(defaultContext, context);
+  }
+  var ctx = new Proxy(
+    {},
+    {
+      get(_, prop) {
+        for (let i = contextStack.length - 1; i >= 0; i--) {
+          if (prop in contextStack[i]) return contextStack[i][prop];
+        }
+        if (prop in defaultContext) return defaultContext[prop];
+        throw new Error(`Context variable '${prop}' is not defined.`);
+      }
+    }
+  );
+  function getContextItem(prop) {
+    return ctx[prop];
+  }
+
+  // lib/input.ts
+  var InputManager = class {
+    keyStates = /* @__PURE__ */ new Map();
+    mouseStates = /* @__PURE__ */ new Map();
+    mouseLocation = { x: 0, y: 0 };
+    mouseDelta = { x: 0, y: 0 };
+    keyEvents = /* @__PURE__ */ new Map();
+    mouseEvents = /* @__PURE__ */ new Map();
+    constructor() {
+      document.addEventListener("keydown", (e) => {
+        this.keyStates.set(e.key, true);
+        this.keyEvents.get(e.key)?.call(e);
+      });
+      document.addEventListener("keyup", (e) => {
+        this.keyStates.set(e.key, false);
+      });
+      document.addEventListener("mousedown", (e) => {
+        this.mouseStates.set(e.button, true);
+        this.mouseEvents.get(e.button)?.call(e);
+      });
+      document.addEventListener("mouseup", (e) => {
+        this.mouseStates.set(e.button, false);
+      });
+      self.addEventListener("mousemove", (e) => {
+        this.mouseLocation = { x: e.clientX, y: e.clientY };
+        this.mouseDelta = {
+          x: e.movementX,
+          y: e.movementY
+        };
+      });
+    }
+    getKeyState(key) {
+      return this.keyStates.get(key);
+    }
+    getMouseState(key) {
+      return this.mouseStates.get(key);
+    }
+    getMouseLocation() {
+      return this.mouseLocation;
+    }
+    getMouseDelta() {
+      return this.mouseDelta;
+    }
+    onKey(key, cb) {
+      this.keyEvents.set(key, cb);
+    }
+    onMouse(key, cb) {
+      this.mouseEvents.set(key, cb);
+    }
+    offKey(key) {
+      this.keyEvents.delete(key);
+    }
+    offMouse(key) {
+      this.mouseEvents.delete(key);
+    }
+  };
+
+  // https://jsr.io/@bearmetal/doodler/0.0.3/geometry/constants.ts
   var Constants = {
     TWO_PI: Math.PI * 2
   };
 
-  // https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/geometry/vector.ts
+  // https://jsr.io/@bearmetal/doodler/0.0.3/geometry/vector.ts
   var Vector = class _Vector {
     x;
     y;
     z;
+    doodler;
     constructor(x = 0, y = 0, z = 0) {
       if (typeof x === "number") {
         this.x = x;
@@ -20,6 +100,9 @@
         this.z = x.z || z;
       }
     }
+    initializeDoodler(doodler2) {
+      this.doodler = doodler2;
+    }
     set(v, y, z) {
       if (arguments.length === 1 && typeof v !== "number") {
         this.set(
@@ -118,9 +201,10 @@
       this.y = s * prev_x + c * this.y;
       return this;
     }
-    dist(v) {
-      const dx = this.x - v.x, dy = this.y - v.y, dz = this.z - (v.z || 0);
-      return Math.sqrt(dx * dx + dy * dy + dz * dz);
+    dist(other) {
+      return Math.sqrt(
+        Math.pow(this.x - other.x, 2) + Math.pow(this.y - other.y, 2) + Math.pow(this.z - other.z, 2)
+      );
     }
     dot(v, y, z) {
       if (arguments.length === 1 && typeof v !== "number") {
@@ -172,7 +256,7 @@
       return this.heading();
     }
     toString() {
-      return "[" + this.x + ", " + this.y + ", " + this.z + "]";
+      return "[" + this.x.toFixed(2) + ", " + this.y.toFixed(2) + ", " + this.z.toFixed(2) + "]";
     }
     array() {
       return [this.x, this.y, this.z];
@@ -181,13 +265,13 @@
       return new _Vector(this.x, this.y, this.z);
     }
     drawDot(color) {
-      if (!doodler) return;
-      doodler.dot(this, { weight: 2, color: color || "red" });
+      if (!this.doodler) return;
+      this.doodler.dot(this, { weight: 2, color: color || "red" });
     }
     draw(origin) {
-      if (!doodler) return;
+      if (!this.doodler) return;
       const startPoint = origin ? new _Vector(origin) : new _Vector();
-      doodler.line(
+      this.doodler.line(
         startPoint,
         startPoint.copy().add(this.copy().normalize().mult(100))
       );
@@ -284,7 +368,35 @@
     }
   };
 
-  // https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/canvas.ts
+  // https://jsr.io/@bearmetal/doodler/0.0.3/FPSCounter.ts
+  var FPSCounter = class {
+    frameTimes = [];
+    maxSamples;
+    totalFrameTime = 0;
+    constructor(maxSamples = 100) {
+      this.maxSamples = maxSamples;
+    }
+    update(deltaTime) {
+      const frameTime = deltaTime;
+      this.frameTimes.push(frameTime);
+      this.totalFrameTime += frameTime;
+      if (this.frameTimes.length > this.maxSamples) {
+        const removed = this.frameTimes.shift();
+        this.totalFrameTime -= removed;
+      }
+    }
+    getFPS() {
+      if (this.frameTimes.length === 0) {
+        return 0;
+      }
+      return this.frameTimes.length / this.totalFrameTime;
+    }
+    getFPSf() {
+      return this.getFPS().toFixed(0);
+    }
+  };
+
+  // https://jsr.io/@bearmetal/doodler/0.0.3/canvas.ts
   var Doodler = class {
     ctx;
     _canvas;
@@ -326,9 +438,9 @@
         resizeObserver.observe(document.body);
       }
       this._canvas = canvas;
-      const ctx = canvas.getContext("2d");
-      if (!ctx) throw "Unable to initialize Doodler: Canvas context not found";
-      this.ctx = ctx;
+      const ctx2 = canvas.getContext("2d");
+      if (!ctx2) throw "Unable to initialize Doodler: Canvas context not found";
+      this.ctx = ctx2;
       postInit?.(this.ctx);
     }
     init() {
@@ -338,7 +450,7 @@
       this.startDrawLoop();
     }
     timer;
-    lastFrameAt = 0;
+    lastFrameAt = performance.now();
     startDrawLoop() {
       this.lastFrameAt = Date.now();
       if (this.framerate) {
@@ -354,16 +466,23 @@
         requestAnimationFrame(cb);
       }
     }
+    fpsCounter = new FPSCounter();
+    get fps() {
+      return this.fpsCounter.getFPS();
+    }
     draw(time) {
-      const frameTime = time - this.lastFrameAt;
+      const frameTime = (time - this.lastFrameAt) / 1e3;
+      this.fpsCounter.update(frameTime);
       this.ctx.clearRect(0, 0, this.width, this.height);
       this.ctx.fillStyle = this.bg;
       this.ctx.fillRect(0, 0, this.width, this.height);
-      for (const [i, l] of (this.layers || []).entries()) {
-        l(this.ctx, i, frameTime);
-        this.drawDeferred();
+      if (frameTime > 0) {
+        for (const [i, l] of (this.layers || []).entries()) {
+          l(this.ctx, i, frameTime);
+          this.drawDeferred();
+        }
+        this.drawUI();
       }
-      this.drawUI();
       this.lastFrameAt = time;
     }
     // Layer management
@@ -503,12 +622,12 @@
       }
     }
     setStyle(style) {
-      const ctx = this.ctx;
-      ctx.fillStyle = style?.color || style?.fillColor || "black";
-      ctx.strokeStyle = style?.color || style?.strokeColor || "black";
-      ctx.lineWidth = style?.weight || 1;
-      ctx.textAlign = style?.textAlign || ctx.textAlign;
-      ctx.textBaseline = style?.textBaseline || ctx.textBaseline;
+      const ctx2 = this.ctx;
+      ctx2.fillStyle = style?.color || style?.fillColor || "black";
+      ctx2.strokeStyle = style?.color || style?.strokeColor || "black";
+      ctx2.lineWidth = style?.weight || 1;
+      ctx2.textAlign = style?.textAlign || ctx2.textAlign;
+      ctx2.textBaseline = style?.textBaseline || ctx2.textBaseline;
     }
     fillText(text, pos, maxWidth, style) {
       this.setStyle(style);
@@ -566,7 +685,7 @@
         d.onDrag = onDrag;
       }
     }
-    onClick(e) {
+    onClick(_e) {
       const mouse = new Vector(this.mouseX, this.mouseY);
       for (const d of this.draggables) {
         if (d.point.dist(mouse) <= d.radius) {
@@ -581,7 +700,7 @@
         }
       }
     }
-    offClick(e) {
+    offClick(_e) {
       for (const d of this.draggables) {
         d.beingDragged = false;
         d.onDragEnd?.call(null);
@@ -589,7 +708,7 @@
       this.dragTarget = void 0;
     }
     onDrag(e) {
-      const rect = this._canvas.getBoundingClientRect();
+      const _rect = this._canvas.getBoundingClientRect();
       this.mouseX = e.offsetX;
       this.mouseY = e.offsetY;
       for (const d of this.draggables.filter((d2) => d2.beingDragged)) {
@@ -631,13 +750,13 @@
     }
   };
 
-  // https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/timing/EaseInOut.ts
+  // https://jsr.io/@bearmetal/doodler/0.0.3/timing/EaseInOut.ts
   var easeInOut = (x) => x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;
 
-  // https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/timing/Map.ts
+  // https://jsr.io/@bearmetal/doodler/0.0.3/timing/Map.ts
   var map = (value, x1, y1, x2, y2) => (value - x1) * (y2 - x2) / (y1 - x1) + x2;
 
-  // https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/zoomableCanvas.ts
+  // https://jsr.io/@bearmetal/doodler/0.0.3/zoomableCanvas.ts
   var ZoomableDoodler = class extends Doodler {
     scale = 1;
     dragging = false;
@@ -901,149 +1020,87 @@
     }
   };
 
-  // https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/init.ts
-  function init(opt, zoomable, postInit) {
-    if (window.doodler) {
-      throw "Doodler has already been initialized in this window";
-    }
-    window.doodler = zoomable ? new ZoomableDoodler(opt, postInit) : new Doodler(opt, postInit);
-    window.doodler.init();
-  }
-
-  // train.ts
-  var Train = class {
-    nodes = [];
-    cars = [];
-    path;
-    t;
-    engineLength = 40;
-    spacing = 30;
-    speed = 0;
-    constructor(track, cars2 = []) {
-      this.path = track;
-      this.t = 0;
-      this.nodes.push(this.path.followEvenPoints(this.t));
-      this.nodes.push(this.path.followEvenPoints(this.t - this.real2Track(40)));
-      const engineSprites2 = document.getElementById(
-        "engine-sprites"
-      );
-      this.cars.push(
-        new TrainCar(
-          55,
-          engineSprites2,
-          80,
-          20,
-          { at: new Vector(0, 60), width: 80, height: 20 }
-        ),
-        new TrainCar(
-          25,
-          engineSprites2,
-          40,
-          20,
-          { at: new Vector(80, 0), width: 40, height: 20 }
-        )
-      );
-      this.cars[0].points = this.nodes.map((n) => n);
-      this.cars[1].points = this.nodes.map((n) => n);
-      let currentOffset = 40;
-      for (const car of cars2) {
-        currentOffset += this.spacing;
-        const a = this.path.followEvenPoints(this.t - currentOffset);
-        currentOffset += car.length;
-        const b = this.path.followEvenPoints(this.t - currentOffset);
-        car.points = [a, b];
-        this.cars.push(car);
+  // lib/resources.ts
+  var ResourceManager = class {
+    resources = /* @__PURE__ */ new Map();
+    statuses = /* @__PURE__ */ new Map();
+    get(name) {
+      if (!this.resources.has(name)) {
+        throw new Error(`Resource ${name} not found`);
       }
+      return this.resources.get(name);
     }
-    move(dTime) {
-      this.t = (this.t + this.speed * dTime * 10) % this.path.evenPoints.length;
-      let currentOffset = 0;
-      for (const car of this.cars) {
-        if (!car.points) return;
-        const [a, b] = car.points;
-        a.set(this.path.followEvenPoints(this.t - currentOffset));
-        currentOffset += car.length;
-        b.set(this.path.followEvenPoints(this.t - currentOffset));
-        currentOffset += this.spacing;
-        car.draw();
-      }
-    }
-    // draw() {
-    //   for (const [i, node] of this.nodes.entries()) {
-    //     doodler.drawCircle(node.point, 10, { color: 'purple', weight: 3 })
-    //     // const next = this.nodes[i + 1];
-    //     // if (next) {
-    //     //   const to = Vector.sub(node.point, next.point);
-    //     //   to.setMag(40);
-    //     //   doodler.line(next.point, Vector.add(to, next.point))
-    //     // }
-    //   }
-    // }
-    real2Track(length2) {
-      return length2 / this.path.pointSpacing;
-    }
-  };
-  var TrainCar = class {
-    img;
-    imgWidth;
-    imgHeight;
-    sprite;
-    points;
-    length;
-    constructor(length2, img, w, h, sprite) {
-      this.img = img;
-      this.sprite = sprite;
-      this.imgWidth = w;
-      this.imgHeight = h;
-      this.length = length2;
-    }
-    draw() {
-      if (!this.points) return;
-      const [a, b] = this.points;
-      const origin = Vector.add(Vector.sub(a, b).div(2), b);
-      const angle = Vector.sub(b, a).heading();
-      doodler.drawCircle(origin, 4, { color: "blue" });
-      doodler.drawRotated(origin, angle, () => {
-        this.sprite ? doodler.drawSprite(
-          this.img,
-          this.sprite.at,
-          this.sprite.width,
-          this.sprite.height,
-          origin.copy().sub(this.imgWidth / 2, this.imgHeight / 2),
-          this.imgWidth,
-          this.imgHeight
-        ) : doodler.drawImage(
-          this.img,
-          origin.copy().sub(this.imgWidth / 2, this.imgHeight / 2)
+    set(name, value) {
+      if (typeof value.addEventListener === "function") {
+        this.statuses.set(
+          name,
+          new Promise((resolve) => {
+            const onload = () => {
+              this.resources.set(name, value);
+              resolve(true);
+              value.removeEventListener("load", onload);
+            };
+            value.addEventListener("load", onload);
+          })
         );
-      });
+      } else {
+        console.warn("Resource added was not a loadable resource");
+      }
+      this.resources.set(name, value);
+    }
+    delete(name) {
+      this.resources.delete(name);
+    }
+    ready() {
+      return Promise.all(Array.from(this.statuses.values()));
     }
   };
 
+  // ui/button.ts
+  function addButton(props) {
+    const doodler2 = getContextItem("doodler");
+    const { text, onClick, style } = props;
+    const { x, y } = props.at[1].copy().sub(props.at[0]);
+    const id = doodler2.addUIElement(
+      "rectangle",
+      props.at[0],
+      x,
+      y,
+      style
+    );
+    doodler2.registerClickable(props.at[0], props.at[1], onClick);
+    return {
+      id,
+      text,
+      onClick,
+      style
+    };
+  }
+
   // math/path.ts
   var PathSegment = class {
     points;
-    ctx;
     length;
     constructor(points) {
       this.points = points;
       this.length = this.calculateApproxLength(100);
     }
-    setContext(ctx) {
-      this.ctx = ctx;
-    }
-    draw() {
-      const [a, b, c, d] = this.points;
-      doodler.drawBezier(a, b, c, d, {
-        strokeColor: "#ffffff50"
-      });
-    }
     getPointAtT(t) {
       const [a, b, c, d] = this.points;
       const res = a.copy();
       res.add(Vector.add(a.copy().mult(-3), b.copy().mult(3)).mult(t));
-      res.add(Vector.add(Vector.add(a.copy().mult(3), b.copy().mult(-6)), c.copy().mult(3)).mult(Math.pow(t, 2)));
-      res.add(Vector.add(Vector.add(a.copy().mult(-1), b.copy().mult(3)), Vector.add(c.copy().mult(-3), d.copy())).mult(Math.pow(t, 3)));
+      res.add(
+        Vector.add(
+          Vector.add(a.copy().mult(3), b.copy().mult(-6)),
+          c.copy().mult(3)
+        ).mult(Math.pow(t, 2))
+      );
+      res.add(
+        Vector.add(
+          Vector.add(a.copy().mult(-1), b.copy().mult(3)),
+          Vector.add(c.copy().mult(-3), d.copy())
+        ).mult(Math.pow(t, 3))
+      );
       return res;
     }
     getClosestPoint(v) {
@@ -1079,7 +1136,12 @@
     tangent(t) {
       const [a, b, c, d] = this.points;
       const res = Vector.sub(b, a).mult(3 * Math.pow(1 - t, 2));
-      res.add(Vector.add(Vector.sub(c, b).mult(6 * (1 - t) * t), Vector.sub(d, c).mult(3 * Math.pow(t, 2))));
+      res.add(
+        Vector.add(
+          Vector.sub(c, b).mult(6 * (1 - t) * t),
+          Vector.sub(d, c).mult(3 * Math.pow(t, 2))
+        )
+      );
       return res;
     }
     doesIntersectCircle(x, y, r) {
@@ -1142,7 +1204,10 @@
         distSinceLastEvenPoint += prev.dist(point);
         if (distSinceLastEvenPoint >= spacing) {
           const overshoot = distSinceLastEvenPoint - spacing;
-          const evenPoint = Vector.add(point, Vector.sub(point, prev).normalize().mult(overshoot));
+          const evenPoint = Vector.add(
+            point,
+            Vector.sub(point, prev).normalize().mult(overshoot)
+          );
           distSinceLastEvenPoint = overshoot;
           points.push(evenPoint);
           prev = evenPoint;
@@ -1153,380 +1218,155 @@
     }
   };
 
-  // track.ts
-  var Track = class extends PathSegment {
-    editable = false;
-    next;
-    prev;
-    id;
-    constructor(points, next, prev) {
-      super(points);
-      this.id = crypto.randomUUID();
-      this.next = next || this;
-      this.prev = prev || this;
-    }
-    // followTrack(train: Train): [Vector, number] {
-    //   const predict = train.velocity.copy();
-    //   predict.normalize();
-    //   predict.mult(1);
-    //   const predictpos = Vector.add(train.position, predict)
-    //   // const leading = train.leadingPoint;
-    //   // let closest = this.points[0];
-    //   // let closestDistance = this.getClosestPoint(leading);
-    //   let [closest, closestDistance, closestT] = this.getClosestPoint(predictpos);
-    //   // deno-lint-ignore no-this-alias
-    //   let mostValid: Track = this;
-    //   if (this.next !== this) {
-    //     const [point, distance, t] = this.next.getClosestPoint(predictpos);
-    //     if (distance < closestDistance) {
-    //       closest = point;
-    //       closestDistance = distance;
-    //       mostValid = this.next;
-    //       closestT = t;
-    //     }
-    //   }
-    //   if (this.prev !== this) {
-    //     const [point, distance, t] = this.next.getClosestPoint(predictpos);
-    //     if (distance < closestDistance) {
-    //       closest = point;
-    //       closestDistance = distance;
-    //       mostValid = this.next;
-    //       closestT = t;
-    //     }
-    //   }
-    //   train.currentTrack = mostValid;
-    //   train.arrive(closest);
-    //   // if (predictpos.dist(closest) > 2) train.arrive(closest);
-    //   return [closest, closestT];
-    // }
-    getNearestPoint(p) {
-      let [closest, closestDistance] = this.getClosestPoint(p);
-      if (this.next !== this) {
-        const [point, distance, t] = this.next.getClosestPoint(p);
-        if (distance < closestDistance) {
-          closest = point;
-          closestDistance = distance;
-        }
-      }
-      if (this.prev !== this) {
-        const [point, distance, t] = this.next.getClosestPoint(p);
-        if (distance < closestDistance) {
-          closest = point;
-          closestDistance = distance;
-        }
-      }
-      return closest;
-    }
-    getAllPointsInRange(v, r) {
-      const points = this.getPointsWithinRadius(v, r).concat(this.next.getPointsWithinRadius(v, r), this.prev.getPointsWithinRadius(v, r));
-      return points;
-    }
-    draw() {
-      super.draw();
-      if (this.editable) {
-        const [a, b, c, d] = this.points;
-        doodler.line(a, b);
-        doodler.line(c, d);
-      }
-    }
-    setNext(t) {
-      this.next = t;
-      this.next.points[0] = this.points[3];
-    }
-    setPrev(t) {
-      this.prev = t;
-      this.prev.points[3] = this.points[0];
-    }
-  };
-  var Spline = class {
-    segments = [];
-    ctx;
-    evenPoints;
-    pointSpacing;
-    get points() {
-      return Array.from(new Set(this.segments.flatMap((s) => s.points)));
-    }
-    nodes;
-    constructor(segs) {
-      this.segments = segs;
-      this.pointSpacing = 1;
-      this.evenPoints = this.calculateEvenlySpacedPoints(1);
-      this.nodes = [];
-      for (let i = 0; i < this.points.length; i += 3) {
-        const node = {
-          anchor: this.points[i],
-          controls: [this.points.at(i - 1), this.points[(i + 1) % this.points.length]],
-          mirrored: false,
-          tangent: true
-        };
-        this.nodes.push(node);
-      }
-    }
-    setContext(ctx) {
-      this.ctx = ctx;
-      for (const segment of this.segments) {
-        segment.setContext(ctx);
-      }
+  // track/system.ts
+  var TrackSystem = class _TrackSystem {
+    segments = /* @__PURE__ */ new Map();
+    doodler;
+    constructor(segments) {
+      this.doodler = getContextItem("doodler");
+      this.segments = segments;
     }
     draw() {
       for (const segment of this.segments) {
         segment.draw();
       }
-    }
-    calculateEvenlySpacedPoints(spacing, resolution = 1) {
-      this.pointSpacing = 1;
-      const points = [];
-      points.push(this.segments[0].points[0]);
-      let prev = points[0];
-      let distSinceLastEvenPoint = 0;
-      for (const seg of this.segments) {
-        let t = 0;
-        const div = Math.ceil(seg.length * resolution * 10);
-        while (t < 1) {
-          t += 1 / div;
-          const point = seg.getPointAtT(t);
-          distSinceLastEvenPoint += prev.dist(point);
-          if (distSinceLastEvenPoint >= spacing) {
-            const overshoot = distSinceLastEvenPoint - spacing;
-            const evenPoint = Vector.add(point, Vector.sub(point, prev).normalize().mult(overshoot));
-            distSinceLastEvenPoint = overshoot;
-            points.push(evenPoint);
-            prev = evenPoint;
+      try {
+        if (getContextItem("showEnds")) {
+          const ends = this.findEnds();
+          for (const end of ends) {
+            this.doodler.fillCircle(end.pos, 2, {
+              color: "red"
+              // weight: 3,
+            });
+            if (getContextItem("debug")) {
+              this.doodler.line(
+                end.pos,
+                end.pos.copy().add(end.tangent.copy().mult(20)),
+                {
+                  color: "blue"
+                  // weight: 3,
+                }
+              );
+            }
           }
-          prev = point;
         }
-      }
-      this.evenPoints = points;
-      return points;
-    }
-    followEvenPoints(t) {
-      if (t < 0) t += this.evenPoints.length;
-      const i = Math.floor(t);
-      const a = this.evenPoints[i];
-      const b = this.evenPoints[(i + 1) % this.evenPoints.length];
-      return Vector.lerp(a, b, t % 1);
-    }
-    calculateApproxLength() {
-      for (const s of this.segments) {
-        s.calculateApproxLength();
+      } catch {
+        setDefaultContext({ showEnds: false });
       }
     }
-    toggleNodeTangent(p) {
-      const node = this.nodes.find((n) => n.anchor === p);
-      node && (node.tangent = !node.tangent);
-    }
-    toggleNodeMirrored(p) {
-      const node = this.nodes.find((n) => n.anchor === p);
-      node && (node.mirrored = !node.mirrored);
-    }
-    handleNodeEdit(p, movement) {
-      const node = this.nodes.find((n) => n.anchor === p || n.controls.includes(p));
-      if (!node || !(node.mirrored || node.tangent)) return;
-      if (node.anchor !== p) {
-        if (node.mirrored || node.tangent) {
-          const mover = node.controls.find((e) => e !== p);
-          const v = Vector.sub(node.anchor, p);
-          if (!node.mirrored) v.setMag(Vector.sub(node.anchor, mover).mag());
-          mover.set(Vector.add(v, node.anchor));
+    findEnds() {
+      const ends = [];
+      for (const segment of this.segments) {
+        const [a, b, c, d] = segment.points;
+        {
+          const tangent = Vector.sub(a, b).normalize();
+          const pos = a.copy();
+          ends.push({ pos, segment, tangent });
         }
-      } else {
-        for (const control of node.controls) {
-          control.add(movement.x, movement.y);
+        {
+          const tangent = Vector.sub(d, c).normalize();
+          const pos = d.copy();
+          ends.push({ pos, segment, tangent });
         }
       }
+      return ends;
+    }
+    serialize() {
+      return this.segments.values().map((s) => s.serialize()).toArray();
+    }
+    static deserialize(data) {
+      const track2 = new _TrackSystem([]);
+      for (const segment of data) {
+        track2.segments.set(segment.id, TrackSegment.deserialize(segment));
+      }
+      return track2;
     }
   };
-  var generateSquareTrack = () => {
-    const first = new Track([new Vector(20, 40), new Vector(20, 100), new Vector(20, 300), new Vector(20, 360)]);
-    const second = new Track([first.points[3], new Vector(20, 370), new Vector(30, 380), new Vector(40, 380)]);
-    const third = new Track([second.points[3], new Vector(100, 380), new Vector(300, 380), new Vector(360, 380)]);
-    const fourth = new Track([third.points[3], new Vector(370, 380), new Vector(380, 370), new Vector(380, 360)]);
-    const fifth = new Track([fourth.points[3], new Vector(380, 300), new Vector(380, 100), new Vector(380, 40)]);
-    const sixth = new Track([fifth.points[3], new Vector(380, 30), new Vector(370, 20), new Vector(360, 20)]);
-    const seventh = new Track([sixth.points[3], new Vector(300, 20), new Vector(100, 20), new Vector(40, 20)]);
-    const eighth = new Track([seventh.points[3], new Vector(30, 20), new Vector(20, 30), first.points[0]]);
-    const tracks = [first, second, third, fourth, fifth, sixth, seventh, eighth];
-    for (const [i, track] of tracks.entries()) {
-      track.next = tracks[(i + 1) % tracks.length];
-      track.prev = tracks.at(i - 1);
+  var TrackSegment = class _TrackSegment extends PathSegment {
+    frontNeighbours = [];
+    backNeighbours = [];
+    track;
+    doodler;
+    id;
+    constructor(p, id) {
+      super(p);
+      this.doodler = getContextItem("doodler");
+      this.id = id ?? crypto.randomUUID();
+    }
+    setTrack(t) {
+      this.track = t;
+    }
+    draw() {
+      this.doodler.drawBezier(
+        this.points[0],
+        this.points[1],
+        this.points[2],
+        this.points[3],
+        {
+          strokeColor: "#ffffff50"
+        }
+      );
+    }
+    serialize() {
+      return {
+        p: this.points.map((p) => p.array()),
+        id: this.id,
+        bNeighbors: this.backNeighbours.map((n) => n.id),
+        fNeighbors: this.frontNeighbours.map((n) => n.id)
+      };
+    }
+    static deserialize(data) {
+      return new _TrackSegment(
+        data.p.map((p) => new Vector(p[0], p[1], p[2])),
+        data.id
+      );
     }
-    return new Spline([first, second, third, fourth, fifth, sixth, seventh, eighth]);
   };
-  var loadFromJson = () => {
-    const json = JSON.parse(localStorage.getItem("railPath") || "");
-    if (!json) return generateSquareTrack();
-    const segments = [];
-    for (const { points } of json.segments) {
-      segments.push(new Track(points.map((p) => new Vector(p.x, p.y))));
+
+  // track/shapes.ts
+  var StraightTrack = class extends TrackSegment {
+    constructor(start) {
+      start = start || new Vector(100, 100);
+      super([
+        start.copy(),
+        start.copy().add(25, 0),
+        start.copy().add(75, 0),
+        start.copy().add(100, 0)
+      ]);
     }
-    for (const [i, s] of segments.entries()) {
-      s.setNext(segments[(i + 1) % segments.length]);
-      s.setPrev(segments.at(i - 1));
-    }
-    return new Spline(segments);
   };
 
   // main.ts
-  var engineSprites = document.createElement("img");
-  engineSprites.src = "./sprites/EngineSprites.png";
-  engineSprites.style.display = "none";
-  engineSprites.id = "engine-sprites";
-  document.body.append(engineSprites);
-  init({
+  var inputManager = new InputManager();
+  var resources = new ResourceManager();
+  var doodler = new ZoomableDoodler({
     fillScreen: true,
-    bg: "#333"
-  }, true);
-  var path;
-  try {
-    path = loadFromJson();
-  } catch {
-    path = generateSquareTrack();
-  }
-  var speed = 1;
-  var length = Math.floor(Math.random() * 7);
-  var cars = Array.from(
-    { length },
-    () => new TrainCar(40, engineSprites, 61, 20, {
-      at: new Vector(80, 20 * Math.ceil(Math.random() * 3)),
-      width: 61,
-      height: 20
-    })
-  );
-  var train = new Train(path, cars);
-  var dragEndCounter = 0;
-  var selectedNode;
-  doodler.createLayer((_1, _2, _3) => {
-    _1.imageSmoothingEnabled = false;
-    const dTime = (_3 < 0 ? 1 : _3) / 1e3;
-    for (let i = 0; i < path.evenPoints.length; i += 10) {
-      const p = path.evenPoints[i];
-      const next = path.evenPoints[(i + 1) % path.evenPoints.length];
-      const last = path.evenPoints.at(i - 1);
-      if (!last) break;
-      const tan = Vector.sub(last, next);
-      doodler.drawRotated(p, tan.heading(), () => {
-        doodler.line(p, p.copy().add(0, 10), { color: "#291b17", weight: 4 });
-        doodler.line(p, p.copy().add(0, -10), { color: "#291b17", weight: 4 });
-        doodler.line(p.copy().add(-6, 5), p.copy().add(6, 5), {
-          color: "grey",
-          weight: 2
-        });
-        doodler.line(p.copy().add(-6, -5), p.copy().add(6, -5), {
-          color: "grey",
-          weight: 2
-        });
-      });
-    }
-    path.draw();
-    train.move(dTime);
-    selectedNode?.anchor.drawDot();
-    selectedNode?.controls.forEach((e) => e.drawDot());
+    bg: "#302040"
   });
-  var editable = false;
-  var clickables = /* @__PURE__ */ new Map();
-  var selectedPoint;
-  document.addEventListener("keyup", (e) => {
-    if (e.key === "d") {
-    }
-    if (e.key === "ArrowUp") {
-      speed += 0.1;
-      train.speed += 1;
-    }
-    if (e.key === "ArrowDown") {
-      speed -= 0.1;
-      train.speed -= 1;
-    }
-    if (e.key === "m" && selectedPoint) {
-      const points = path.points;
-      const index = points.findIndex((p) => p === selectedPoint);
-      if (index > -1) {
-        const prev = points.at(index - 1);
-        const next = points[(index + 1) % points.length];
-        const toPrev = Vector.sub(prev, selectedPoint);
-        toPrev.setMag(next.dist(selectedPoint));
-        toPrev.rotate(Math.PI);
-        const toNext = Vector.add(toPrev, selectedPoint);
-        next.set(toNext);
-        path.calculateApproxLength();
-        path.calculateEvenlySpacedPoints(1);
-      }
-    }
-    let translate = false;
-    if (e.key === "e" && !translate) {
-      editable = !editable;
-      for (const t of path.segments) {
-        t.editable = !t.editable;
-        for (const p of t.points) {
-          if (t.editable) {
-            doodler.registerDraggable(p, 10);
-            doodler.addDragEvents({
-              point: p,
-              onDragEnd: () => {
-                dragEndCounter++;
-                t.length = t.calculateApproxLength(100);
-                path.evenPoints = path.calculateEvenlySpacedPoints(1);
-              },
-              onDrag: (movement) => {
-                path.handleNodeEdit(p, movement);
-              }
-            });
-          } else {
-            doodler.unregisterDraggable(p);
-          }
-        }
-      }
-      for (const p of path.points) {
-        if (editable) {
-          const onClick = () => {
-            selectedPoint = p;
-            selectedNode = path.nodes.find(
-              (e2) => e2.anchor === p || e2.controls.includes(p)
-            );
-          };
-          clickables.set(p, onClick);
-          doodler.registerClickable(
-            p.copy().sub(10, 10),
-            p.copy().add(10, 10),
-            onClick
-          );
-        } else {
-          const the = clickables.get(p);
-          doodler.unregisterClickable(the);
-        }
-      }
-    }
-    let x = 0;
-    let y = 0;
-    const onDrag = (e2) => {
-      x += e2.movementX;
-      y += e2.movementY;
-      console.log("draggin");
-    };
-    const dragEnd = () => {
-      x = 0;
-      y = 0;
-      for (const t of path.points) {
-        t.add(x, y);
-      }
-    };
-    if (e.key === "t" && editable) {
-      for (const t of path.points) {
-        t.add(100, 100);
-      }
-      path.calculateEvenlySpacedPoints(1);
+  setDefaultContext({
+    inputManager,
+    doodler,
+    resources,
+    debug: true,
+    showEnds: true
+  });
+  doodler.init();
+  addButton({
+    text: "Hello World!",
+    onClick: () => {
+      console.log("Hello World!");
+    },
+    at: [
+      new Vector(10, doodler.height - 50),
+      new Vector(110, doodler.height - 10)
+    ],
+    style: {
+      fillColor: "blue",
+      color: "white"
     }
   });
-  document.addEventListener("keydown", (e) => {
-    if (e.key === "s") {
-      e.preventDefault();
-      path.segments.forEach((s) => {
-        s.next = s.next.id;
-        s.prev = s.prev.id;
-        delete s.ctx;
-      });
-      delete path.ctx;
-      const json = JSON.stringify(path);
-      localStorage.setItem("railPath", json);
-    }
+  var track = new TrackSystem([new StraightTrack()]);
+  doodler.createLayer(() => {
+    track.draw();
   });
 })();
diff --git a/canvas/canvas.ts b/canvas/canvas.ts
deleted file mode 100644
index 4a0303b..0000000
--- a/canvas/canvas.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-
-type ClickEvent = {
-  mouseX: number;
-  mouseY: number;
-}
-type ClickEventHandler = (e: ClickEvent) => void;
-
-export class Canvas {
-  clickables: ClickEventHandler[] = [];
-  
-  constructor();
-  constructor(width: number, height: number);
-  constructor(width?: number, height?: number) {
-    const canvas = document.createElement('canvas');
-    canvas.width = width || 400;
-    canvas.height = height || 400;
-  }
-}
\ No newline at end of file
diff --git a/deno.json b/deno.json
index 61fc12d..f12d7db 100644
--- a/deno.json
+++ b/deno.json
@@ -10,9 +10,10 @@
     ]
   },
   "tasks": {
-    "dev": "deno run -RWEN --allow-run --unstable dev.ts dev"
+    "dev": "deno run -RWEN --allow-run dev.ts dev"
   },
   "imports": {
-    "doodler": "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/mod.ts"
+    "@bearmetal/doodler": "jsr:@bearmetal/doodler@^0.0.3",
+    "@lib/": "./lib/"
   }
-}
+}
\ No newline at end of file
diff --git a/deno.lock b/deno.lock
index 86a2ecd..ebb8570 100644
--- a/deno.lock
+++ b/deno.lock
@@ -1,21 +1,29 @@
 {
   "version": "4",
   "specifiers": {
+    "jsr:@bearmetal/doodler@^0.0.3": "0.0.3",
     "jsr:@luca/esbuild-deno-loader@*": "0.11.0",
+    "jsr:@std/assert@*": "1.0.10",
+    "jsr:@std/assert@^1.0.10": "1.0.10",
     "jsr:@std/bytes@^1.0.2": "1.0.2",
     "jsr:@std/cli@^1.0.8": "1.0.9",
     "jsr:@std/encoding@^1.0.5": "1.0.6",
     "jsr:@std/fmt@^1.0.3": "1.0.3",
     "jsr:@std/html@^1.0.3": "1.0.3",
     "jsr:@std/http@*": "1.0.12",
+    "jsr:@std/internal@^1.0.5": "1.0.5",
     "jsr:@std/media-types@^1.1.0": "1.1.0",
     "jsr:@std/net@^1.0.4": "1.0.4",
     "jsr:@std/path@^1.0.6": "1.0.8",
     "jsr:@std/path@^1.0.8": "1.0.8",
     "jsr:@std/streams@^1.0.8": "1.0.8",
+    "jsr:@std/testing@*": "1.0.8",
     "npm:esbuild@*": "0.24.2"
   },
   "jsr": {
+    "@bearmetal/doodler@0.0.3": {
+      "integrity": "42c04b672f4a6bc7ebd45ad936197a2e32856364b66a9a9fe2b81a4aa45c7a08"
+    },
     "@luca/esbuild-deno-loader@0.11.0": {
       "integrity": "c05a989aa7c4ee6992a27be5f15cfc5be12834cab7ff84cabb47313737c51a2c",
       "dependencies": [
@@ -24,6 +32,12 @@
         "jsr:@std/path@^1.0.6"
       ]
     },
+    "@std/assert@1.0.10": {
+      "integrity": "59b5cbac5bd55459a19045d95cc7c2ff787b4f8527c0dd195078ff6f9481fbb3",
+      "dependencies": [
+        "jsr:@std/internal"
+      ]
+    },
     "@std/bytes@1.0.2": {
       "integrity": "fbdee322bbd8c599a6af186a1603b3355e59a5fb1baa139f8f4c3c9a1b3e3d57"
     },
@@ -52,6 +66,9 @@
         "jsr:@std/streams"
       ]
     },
+    "@std/internal@1.0.5": {
+      "integrity": "54a546004f769c1ac9e025abd15a76b6671ddc9687e2313b67376125650dc7ba"
+    },
     "@std/media-types@1.1.0": {
       "integrity": "c9d093f0c05c3512932b330e3cc1fe1d627b301db33a4c2c2185c02471d6eaa4"
     },
@@ -63,6 +80,13 @@
     },
     "@std/streams@1.0.8": {
       "integrity": "b41332d93d2cf6a82fe4ac2153b930adf1a859392931e2a19d9fabfb6f154fb3"
+    },
+    "@std/testing@1.0.8": {
+      "integrity": "ceef535808fb7568e91b0f8263599bd29b1c5603ffb0377227f00a8ca9fe42a2",
+      "dependencies": [
+        "jsr:@std/assert@^1.0.10",
+        "jsr:@std/internal"
+      ]
     }
   },
   "npm": {
@@ -193,5 +217,10 @@
     "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/timing/EaseInOut.ts": "9eba3d8f5bf5e03220c93916cff6f0bbc24ecdf7550f21fd99e3aaf310f625b0",
     "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/timing/Map.ts": "3948648f8bdf8f1ecea83120c41211f5543c7933dbe3e49b367285a98ed50a9a",
     "https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/zoomableCanvas.ts": "395f80ddaef83e2b37a2884d7fffefae80c2bcecb72269405f53899d5dfc9956"
+  },
+  "workspace": {
+    "dependencies": [
+      "jsr:@bearmetal/doodler@^0.0.3"
+    ]
   }
 }
diff --git a/dev.ts b/dev.ts
index e4214aa..4a1a29c 100644
--- a/dev.ts
+++ b/dev.ts
@@ -4,16 +4,28 @@ import * as esbuild from "npm:esbuild";
 import { denoPlugins } from "jsr:@luca/esbuild-deno-loader";
 import { serveDir } from "jsr:@std/http";
 
+async function* crawl(dir: string): AsyncIterable<string> {
+  for await (const file of Deno.readDir(dir)) {
+    const fullPath = dir + "/" + file.name;
+
+    if (file.isDirectory) {
+      yield* crawl(fullPath);
+    } else {
+      yield fullPath;
+    }
+  }
+}
+
 async function dev() {
   const paths = [];
-  const ignoredFiles = ["bundler", "bundle", "dev"];
+  const ignoredFiles = ["bundler", "bundle", "dev", "test"];
 
-  for (const path of Deno.readDirSync("./")) {
+  for await (const path of crawl("./")) {
     if (
-      path.name.endsWith(".ts") &&
-      !ignoredFiles.find((file) => path.name.includes(file))
+      path.endsWith(".ts") &&
+      !ignoredFiles.find((file) => path.includes(file))
     ) {
-      paths.push(path.name);
+      paths.push(path);
     }
   }
   await build();
diff --git a/drawing/circle.ts b/drawing/circle.ts
deleted file mode 100644
index 2991b6b..0000000
--- a/drawing/circle.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Constants } from "../math/constants.ts";
-import { Vector } from "doodler";
-
-const circle = (ctx: CanvasRenderingContext2D, center: Vector, radius: number) => {
-  ctx.beginPath();
-  ctx.arc(center.x, center.y, radius, 0, Constants.TWO_PI);
-}
-
-export const drawCircle = (ctx: CanvasRenderingContext2D, center: Vector, radius: number) => {
-  circle(ctx, center, radius);
-  ctx.stroke();
-}
-export const fillCircle = (ctx: CanvasRenderingContext2D, center: Vector, radius: number) => {
-  circle(ctx, center, radius);
-  ctx.fill();
-}
\ No newline at end of file
diff --git a/drawing/index.ts b/drawing/index.ts
deleted file mode 100644
index ff4277a..0000000
--- a/drawing/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { drawCircle, fillCircle } from './circle.ts'
\ No newline at end of file
diff --git a/drawing/line.ts b/drawing/line.ts
deleted file mode 100644
index 50b431c..0000000
--- a/drawing/line.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export const drawLine = (ctx: CanvasRenderingContext2D, x1:number, y1:number, x2:number, y2: number) => {
-  ctx.beginPath();
-  ctx.moveTo(x1,y1);
-  ctx.lineTo(x2,y2);
-  ctx.stroke();
-}
\ No newline at end of file
diff --git a/lib/context.ts b/lib/context.ts
index 115d374..90862ce 100644
--- a/lib/context.ts
+++ b/lib/context.ts
@@ -27,8 +27,11 @@ export const ctx = new Proxy(
       throw new Error(`Context variable '${prop}' is not defined.`);
     },
   },
-) as Record<string, any>;
+) as Record<string, unknown>;
 
 export function getContext() {
   return ctx;
 }
+export function getContextItem<T>(prop: string): T {
+  return ctx[prop] as T;
+}
diff --git a/lib/input.ts b/lib/input.ts
index f4b4a92..f2ee408 100644
--- a/lib/input.ts
+++ b/lib/input.ts
@@ -3,15 +3,21 @@ export class InputManager {
   private mouseStates: Map<string | number, boolean> = new Map();
   private mouseLocation: { x: number; y: number } = { x: 0, y: 0 };
   private mouseDelta: { x: number; y: number } = { x: 0, y: 0 };
+
+  private keyEvents: Map<string | number, () => void> = new Map();
+  private mouseEvents: Map<string | number, () => void> = new Map();
+
   constructor() {
     document.addEventListener("keydown", (e) => {
       this.keyStates.set(e.key, true);
+      this.keyEvents.get(e.key)?.call(e);
     });
     document.addEventListener("keyup", (e) => {
       this.keyStates.set(e.key, false);
     });
     document.addEventListener("mousedown", (e) => {
       this.mouseStates.set(e.button, true);
+      this.mouseEvents.get(e.button)?.call(e);
     });
     document.addEventListener("mouseup", (e) => {
       this.mouseStates.set(e.button, false);
@@ -38,4 +44,18 @@ export class InputManager {
   getMouseDelta() {
     return this.mouseDelta;
   }
+
+  onKey(key: string | number, cb: () => void) {
+    this.keyEvents.set(key, cb);
+  }
+  onMouse(key: string | number, cb: () => void) {
+    this.mouseEvents.set(key, cb);
+  }
+
+  offKey(key: string | number) {
+    this.keyEvents.delete(key);
+  }
+  offMouse(key: string | number) {
+    this.mouseEvents.delete(key);
+  }
 }
diff --git a/lib/resources.ts b/lib/resources.ts
new file mode 100644
index 0000000..891d8ab
--- /dev/null
+++ b/lib/resources.ts
@@ -0,0 +1,38 @@
+export class ResourceManager {
+  private resources: Map<string, unknown> = new Map();
+  private statuses: Map<string, Promise<boolean>> = new Map();
+
+  get<T>(name: string): T {
+    if (!this.resources.has(name)) {
+      throw new Error(`Resource ${name} not found`);
+    }
+    return this.resources.get(name) as T;
+  }
+
+  set(name: string, value: unknown) {
+    if (typeof (value as EventSource).addEventListener === "function") {
+      this.statuses.set(
+        name,
+        new Promise((resolve) => {
+          const onload = () => {
+            this.resources.set(name, value);
+            resolve(true);
+            (value as EventSource).removeEventListener("load", onload);
+          };
+          (value as EventSource).addEventListener("load", onload);
+        }),
+      );
+    } else {
+      console.warn("Resource added was not a loadable resource");
+    }
+    this.resources.set(name, value);
+  }
+
+  delete(name: string) {
+    this.resources.delete(name);
+  }
+
+  ready() {
+    return Promise.all(Array.from(this.statuses.values()));
+  }
+}
diff --git a/main.ts b/main.ts
index e69de29..4303a50 100644
--- a/main.ts
+++ b/main.ts
@@ -0,0 +1,45 @@
+import { setDefaultContext } from "./lib/context.ts";
+import { InputManager } from "./lib/input.ts";
+
+import { Doodler, Vector, ZoomableDoodler } from "@bearmetal/doodler";
+import { ResourceManager } from "./lib/resources.ts";
+import { addButton } from "./ui/button.ts";
+import { TrackSystem } from "./track/system.ts";
+import { StraightTrack } from "./track/shapes.ts";
+
+const inputManager = new InputManager();
+const resources = new ResourceManager();
+const doodler = new ZoomableDoodler({
+  fillScreen: true,
+  bg: "#302040",
+});
+
+setDefaultContext({
+  inputManager,
+  doodler,
+  resources,
+  debug: true,
+  showEnds: true,
+});
+
+doodler.init();
+addButton({
+  text: "Hello World!",
+  onClick: () => {
+    console.log("Hello World!");
+  },
+  at: [
+    new Vector(10, doodler.height - 50),
+    new Vector(110, doodler.height - 10),
+  ],
+  style: {
+    fillColor: "blue",
+    color: "white",
+  },
+});
+
+const track = new TrackSystem([new StraightTrack()]);
+
+doodler.createLayer(() => {
+  track.draw();
+});
diff --git a/math/lerp.ts b/math/lerp.ts
index 41faba0..a3e4386 100644
--- a/math/lerp.ts
+++ b/math/lerp.ts
@@ -1,8 +1,11 @@
-import { Vector } from "doodler";
-
 export const lerp = (a: number, b: number, t: number) => {
-  return (a*t) + (b*(1-t));
-}
+  return (a * t) + (b * (1 - t));
+};
 
-export const map = (value: number, x1: number, y1: number, x2: number, y2: number) => 
-(value - x1) * (y2 - x2) / (y1 - x1) + x2;
\ No newline at end of file
+export const map = (
+  value: number,
+  x1: number,
+  y1: number,
+  x2: number,
+  y2: number,
+) => (value - x1) * (y2 - x2) / (y1 - x1) + x2;
diff --git a/math/path.ts b/math/path.ts
index 05ae072..bff925d 100644
--- a/math/path.ts
+++ b/math/path.ts
@@ -1,7 +1,6 @@
-import { Vector } from "doodler";
+import { Vector } from "@bearmetal/doodler";
 
 export class ComplexPath {
-
   points: Vector[] = [];
 
   radius = 50;
@@ -22,10 +21,10 @@ export class ComplexPath {
 
     ctx.save();
     ctx.lineWidth = 2;
-    ctx.strokeStyle = 'white';
-    ctx.setLineDash([21, 6])
+    ctx.strokeStyle = "white";
+    ctx.setLineDash([21, 6]);
 
-    let last = this.points[this.points.length - 1]
+    let last = this.points[this.points.length - 1];
 
     for (const point of this.points) {
       ctx.beginPath();
@@ -39,8 +38,7 @@ export class ComplexPath {
 }
 
 export class PathSegment {
-  points: [Vector, Vector, Vector, Vector]
-  ctx?: CanvasRenderingContext2D;
+  points: [Vector, Vector, Vector, Vector];
 
   length: number;
 
@@ -49,44 +47,23 @@ export class PathSegment {
     this.length = this.calculateApproxLength(100);
   }
 
-  setContext(ctx: CanvasRenderingContext2D) {
-    this.ctx = ctx;
-  }
-
-  draw() {
-    const [a, b, c, d] = this.points;
-    doodler.drawBezier(a, b, c, d, {
-      strokeColor: '#ffffff50'
-    })
-    // if (!this.ctx) return;
-    // const ctx = this.ctx;
-
-    // ctx.save();
-    // ctx.beginPath();
-    // ctx.moveTo(this.points[0].x, this.points[0].y);
-
-    // ctx.bezierCurveTo(
-    //   this.points[1].x,
-    //   this.points[1].y,
-    //   this.points[2].x,
-    //   this.points[2].y,
-    //   this.points[3].x,
-    //   this.points[3].y,
-    // );
-
-    // ctx.strokeStyle = '#ffffff50';
-    // ctx.lineWidth = 2;
-    // ctx.stroke();
-    // ctx.restore();
-  }
-
   getPointAtT(t: number) {
     const [a, b, c, d] = this.points;
     const res = a.copy();
 
-    res.add(Vector.add(a.copy().mult(-3), b.copy().mult(3)).mult(t))
-    res.add(Vector.add(Vector.add(a.copy().mult(3), b.copy().mult(-6)), c.copy().mult(3)).mult(Math.pow(t, 2)));
-    res.add(Vector.add(Vector.add(a.copy().mult(-1), b.copy().mult(3)), Vector.add(c.copy().mult(-3), d.copy())).mult(Math.pow(t, 3)));
+    res.add(Vector.add(a.copy().mult(-3), b.copy().mult(3)).mult(t));
+    res.add(
+      Vector.add(
+        Vector.add(a.copy().mult(3), b.copy().mult(-6)),
+        c.copy().mult(3),
+      ).mult(Math.pow(t, 2)),
+    );
+    res.add(
+      Vector.add(
+        Vector.add(a.copy().mult(-1), b.copy().mult(3)),
+        Vector.add(c.copy().mult(-3), d.copy()),
+      ).mult(Math.pow(t, 3)),
+    );
 
     return res;
   }
@@ -123,15 +100,20 @@ export class PathSegment {
         points.push([i * resolution, this]);
       }
     }
-    return points
+    return points;
   }
 
   tangent(t: number) {
-    // dP(t) / dt =  -3(1-t)^2 * P0 + 3(1-t)^2 * P1 - 6t(1-t) * P1 - 3t^2 * P2 + 6t(1-t) * P2 + 3t^2 * P3 
+    // dP(t) / dt =  -3(1-t)^2 * P0 + 3(1-t)^2 * P1 - 6t(1-t) * P1 - 3t^2 * P2 + 6t(1-t) * P2 + 3t^2 * P3
     const [a, b, c, d] = this.points;
 
     const res = Vector.sub(b, a).mult(3 * Math.pow(1 - t, 2));
-    res.add(Vector.add(Vector.sub(c, b).mult(6 * (1 - t) * t), Vector.sub(d, c).mult(3 * Math.pow(t, 2))));
+    res.add(
+      Vector.add(
+        Vector.sub(c, b).mult(6 * (1 - t) * t),
+        Vector.sub(d, c).mult(3 * Math.pow(t, 2)),
+      ),
+    );
 
     return res;
   }
@@ -158,12 +140,12 @@ export class PathSegment {
 
         let dist;
         if (k <= 0.0) {
-          dist = Vector.hypot2(v, a)
+          dist = Vector.hypot2(v, a);
         } else if (k >= 1.0) {
-          dist = Vector.hypot2(v, b)
+          dist = Vector.hypot2(v, b);
         }
 
-        dist = Vector.hypot2(v, d)
+        dist = Vector.hypot2(v, d);
 
         if (dist < distance) {
           distance = dist;
@@ -179,27 +161,28 @@ export class PathSegment {
 
   calculateApproxLength(resolution = 25) {
     const stepSize = 1 / resolution;
-    const points: Vector[] = []
+    const points: Vector[] = [];
     for (let i = 0; i <= resolution; i++) {
       const current = stepSize * i;
-      points.push(this.getPointAtT(current))
+      points.push(this.getPointAtT(current));
     }
-    this.length = points.reduce((acc: { prev?: Vector, length: number }, cur) => {
-      const prev = acc.prev;
-      acc.prev = cur;
-      if (!prev) return acc;
-      acc.length += cur.dist(prev);
-      return acc;
-    }, { prev: undefined, length: 0 }).length
+    this.length =
+      points.reduce((acc: { prev?: Vector; length: number }, cur) => {
+        const prev = acc.prev;
+        acc.prev = cur;
+        if (!prev) return acc;
+        acc.length += cur.dist(prev);
+        return acc;
+      }, { prev: undefined, length: 0 }).length;
     return this.length;
   }
 
   calculateEvenlySpacedPoints(spacing: number, resolution = 1) {
-    const points: Vector[] = []
+    const points: Vector[] = [];
 
     points.push(this.points[0]);
     let prev = points[0];
-    let distSinceLastEvenPoint = 0
+    let distSinceLastEvenPoint = 0;
 
     let t = 0;
 
@@ -209,10 +192,12 @@ export class PathSegment {
       const point = this.getPointAtT(t);
       distSinceLastEvenPoint += prev.dist(point);
 
-
       if (distSinceLastEvenPoint >= spacing) {
         const overshoot = distSinceLastEvenPoint - spacing;
-        const evenPoint = Vector.add(point, Vector.sub(point, prev).normalize().mult(overshoot))
+        const evenPoint = Vector.add(
+          point,
+          Vector.sub(point, prev).normalize().mult(overshoot),
+        );
         distSinceLastEvenPoint = overshoot;
         points.push(evenPoint);
         prev = evenPoint;
diff --git a/state/machine.ts b/state/machine.ts
new file mode 100644
index 0000000..2ac7110
--- /dev/null
+++ b/state/machine.ts
@@ -0,0 +1,53 @@
+export class StateMachine {
+  private _states: Map<string, State> = new Map();
+  private currentState: State;
+
+  constructor(states: State[]) {
+    this.currentState = states[0];
+  }
+
+  update(dt: number) {
+    this.currentState.update(dt);
+  }
+
+  get current() {
+    return this.currentState;
+  }
+
+  get states() {
+    return this._states;
+  }
+
+  addState(state: State) {
+    this.states.set(state.name, state);
+  }
+
+  transitionTo(state: State) {
+    if (this.current.canTransitionTo(state)) {
+      this.current.stop();
+      this.currentState = state;
+      this.current.start();
+    }
+  }
+}
+
+export abstract class State<T> {
+  private stateMachine: StateMachine;
+  protected abstract validTransitions: Set<T>;
+
+  abstract readonly name: T;
+
+  constructor(
+    stateMachine: StateMachine,
+  ) {
+    this.stateMachine = stateMachine;
+  }
+
+  abstract update(dt: number): void;
+  abstract start(): void;
+  abstract stop(): void;
+
+  canTransitionTo(state: T) {
+    return this.validTransitions.has(state);
+  }
+}
diff --git a/state/states.ts b/state/states.ts
new file mode 100644
index 0000000..6043517
--- /dev/null
+++ b/state/states.ts
@@ -0,0 +1,139 @@
+import { State } from "./machine.ts";
+
+enum States {
+  LOAD,
+  RUNNING,
+  PAUSED,
+  EDIT_TRACK,
+  EDIT_TRAIN,
+}
+
+export class LoadState extends State<States> {
+  override name: States = States.LOAD;
+  override validTransitions: Set<States> = new Set([
+    States.RUNNING,
+  ]);
+
+  override update(dt: number): void {
+    throw new Error("Method not implemented.");
+    // TODO
+    // Do nothing
+  }
+  override start(): void {
+    throw new Error("Method not implemented.");
+    // TODO
+    // load track into context
+    // Load trains into context
+    // Load resources into context
+    // Switch to running state
+  }
+  override stop(): void {
+    throw new Error("Method not implemented.");
+    // TODO
+    // Do nothing
+  }
+}
+
+export class RunningState extends State<States> {
+  override name: States = States.RUNNING;
+  override validTransitions: Set<States> = new Set([
+    States.PAUSED,
+    States.EDIT_TRACK,
+  ]);
+  override update(dt: number): void {
+    throw new Error("Method not implemented.");
+    // TODO
+    // Update trains
+    // Update world
+    // Handle input
+    // Draw (maybe via a layer system that syncs with doodler)
+    // Monitor world events
+  }
+  override start(): void {
+    throw new Error("Method not implemented.");
+    // TODO
+    // Do nothing
+  }
+  override stop(): void {
+    throw new Error("Method not implemented.");
+    // TODO
+    // Do nothing
+  }
+}
+
+export class PausedState extends State<States> {
+  override name: States = States.PAUSED;
+  override validTransitions: Set<States> = new Set([
+    States.LOAD,
+    States.RUNNING,
+    States.EDIT_TRACK,
+    States.EDIT_TRAIN,
+  ]);
+  override update(dt: number): void {
+    throw new Error("Method not implemented.");
+    // TODO
+    // Handle input
+    // Draw ui
+  }
+  override start(): void {
+    throw new Error("Method not implemented.");
+    // TODO
+    // Save tracks to cache
+    // Save trains to cache
+    // Save resources to cache
+  }
+  override stop(): void {
+    throw new Error("Method not implemented.");
+    // TODO
+    // Do nothing
+  }
+}
+
+export class EditTrackState extends State<States> {
+  override name: States = States.EDIT_TRACK;
+  override validTransitions: Set<States> = new Set([
+    States.RUNNING,
+    States.PAUSED,
+  ]);
+  override update(dt: number): void {
+    throw new Error("Method not implemented.");
+    // TODO
+    // Handle input
+    // Draw ui
+    // Draw track
+    // Draw track points
+    // Draw track tangents
+  }
+  override start(): void {
+    throw new Error("Method not implemented.");
+    // TODO
+    // Cache trains and save
+    // Stash track in context
+  }
+  override stop(): void {
+    throw new Error("Method not implemented.");
+  }
+}
+
+export class EditTrainState extends State<States> {
+  override name: States = States.EDIT_TRAIN;
+  override validTransitions: Set<States> = new Set([
+    States.RUNNING,
+    States.PAUSED,
+  ]);
+
+  override update(dt: number): void {
+    throw new Error("Method not implemented.");
+  }
+  override start(): void {
+    throw new Error("Method not implemented.");
+    // TODO
+    // Cache trains
+    // Stash train in context
+    // Draw track
+    // Draw train (filtered by train ID)
+  }
+  override stop(): void {
+    throw new Error("Method not implemented.");
+  }
+}
diff --git a/test/bench.ts b/test/bench.ts
new file mode 100644
index 0000000..9eef3f0
--- /dev/null
+++ b/test/bench.ts
@@ -0,0 +1,38 @@
+import { assert } from "jsr:@std/assert";
+import { describe, it } from "jsr:@std/testing/bdd";
+
+/**
+ * Tests if a function can run a given number of iterations within a target frame time.
+ * @param fn The function to test.
+ * @param iterations Number of times to run the function per frame.
+ * @param fps Target frames per second.
+ */
+export function testPerformance(
+  fn: () => unknown,
+  iterations: number,
+  fps: number,
+) {
+  console.log(`Performance Test - ${iterations} iterations at ${fps} FPS`);
+  const frameTime = 1000 / fps;
+  const startTime = performance.now();
+
+  for (let i = 0; i < iterations; i++) {
+    fn();
+  }
+
+  const endTime = performance.now();
+  const elapsed = endTime - startTime;
+
+  console.log(
+    `Elapsed time: ${elapsed.toFixed(2)}ms (Target: ≤${
+      frameTime.toFixed(2)
+    }ms)`,
+  );
+  assert(
+    elapsed <= frameTime,
+    `Function took too long: ${elapsed.toFixed(2)}ms (Target: ≤${
+      frameTime.toFixed(2)
+    }ms)`,
+  );
+  // });
+}
diff --git a/test/bundle.js b/test/bundle.js
deleted file mode 100644
index 49962a6..0000000
--- a/test/bundle.js
+++ /dev/null
@@ -1,1455 +0,0 @@
-(() => {
-  // https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/geometry/constants.ts
-  var Constants = {
-    TWO_PI: Math.PI * 2
-  };
-
-  // https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/geometry/vector.ts
-  var Vector = class _Vector {
-    x;
-    y;
-    z;
-    constructor(x = 0, y = 0, z = 0) {
-      if (typeof x === "number") {
-        this.x = x;
-        this.y = y;
-        this.z = z;
-      } else {
-        this.x = x.x;
-        this.y = x.y || y;
-        this.z = x.z || z;
-      }
-    }
-    set(v, y, z) {
-      if (arguments.length === 1 && typeof v !== "number") {
-        this.set(
-          v.x || v[0] || 0,
-          v.y || v[1] || 0,
-          v.z || v[2] || 0
-        );
-      } else {
-        this.x = v;
-        this.y = y || 0;
-        this.z = z || 0;
-      }
-    }
-    get() {
-      return new _Vector(this.x, this.y, this.z);
-    }
-    mag() {
-      const x = this.x, y = this.y, z = this.z;
-      return Math.sqrt(x * x + y * y + z * z);
-    }
-    magSq() {
-      const x = this.x, y = this.y, z = this.z;
-      return x * x + y * y + z * z;
-    }
-    setMag(v_or_len, len) {
-      if (len === void 0) {
-        len = v_or_len;
-        this.normalize();
-        this.mult(len);
-      } else {
-        const v = v_or_len;
-        v.normalize();
-        v.mult(len);
-        return v;
-      }
-    }
-    add(v, y, z) {
-      if (arguments.length === 1 && typeof v !== "number") {
-        this.x += v.x;
-        this.y += v.y;
-        this.z += v.z;
-      } else if (arguments.length === 2) {
-        this.x += v;
-        this.y += y ?? 0;
-      } else {
-        this.x += v;
-        this.y += y ?? 0;
-        this.z += z ?? 0;
-      }
-      return this;
-    }
-    sub(v, y, z) {
-      if (arguments.length === 1 && typeof v !== "number") {
-        this.x -= v.x;
-        this.y -= v.y;
-        this.z -= v.z || 0;
-      } else if (arguments.length === 2) {
-        this.x -= v;
-        this.y -= y ?? 0;
-      } else {
-        this.x -= v;
-        this.y -= y ?? 0;
-        this.z -= z ?? 0;
-      }
-      return this;
-    }
-    mult(v) {
-      if (typeof v === "number") {
-        this.x *= v;
-        this.y *= v;
-        this.z *= v;
-      } else {
-        this.x *= v.x;
-        this.y *= v.y;
-        this.z *= v.z;
-      }
-      return this;
-    }
-    div(v) {
-      if (typeof v === "number") {
-        this.x /= v;
-        this.y /= v;
-        this.z /= v;
-      } else {
-        this.x /= v.x;
-        this.y /= v.y;
-        this.z /= v.z;
-      }
-      return this;
-    }
-    rotate(angle) {
-      const prev_x = this.x;
-      const c = Math.cos(angle);
-      const s = Math.sin(angle);
-      this.x = c * this.x - s * this.y;
-      this.y = s * prev_x + c * this.y;
-      return this;
-    }
-    dist(v) {
-      const dx = this.x - v.x, dy = this.y - v.y, dz = this.z - (v.z || 0);
-      return Math.sqrt(dx * dx + dy * dy + dz * dz);
-    }
-    dot(v, y, z) {
-      if (arguments.length === 1 && typeof v !== "number") {
-        return this.x * v.x + this.y * v.y + this.z * v.z;
-      }
-      return this.x * v + this.y * y + this.z * z;
-    }
-    cross(v) {
-      const x = this.x, y = this.y, z = this.z;
-      return new _Vector(y * v.z - v.y * z, z * v.x - v.z * x, x * v.y - v.x * y);
-    }
-    lerp(v_or_x, amt_or_y, z, amt) {
-      const lerp_val = (start, stop, amt2) => {
-        return start + (stop - start) * amt2;
-      };
-      let x, y;
-      if (arguments.length === 2 && typeof v_or_x !== "number") {
-        amt = amt_or_y;
-        x = v_or_x.x;
-        y = v_or_x.y;
-        z = v_or_x.z;
-      } else {
-        x = v_or_x;
-        y = amt_or_y;
-      }
-      this.x = lerp_val(this.x, x, amt);
-      this.y = lerp_val(this.y, y, amt);
-      this.z = lerp_val(this.z, z, amt);
-      return this;
-    }
-    normalize() {
-      const m = this.mag();
-      if (m > 0) {
-        this.div(m);
-      }
-      return this;
-    }
-    limit(high) {
-      if (this.mag() > high) {
-        this.normalize();
-        this.mult(high);
-      }
-      return this;
-    }
-    heading() {
-      return -Math.atan2(-this.y, this.x);
-    }
-    heading2D() {
-      return this.heading();
-    }
-    toString() {
-      return "[" + this.x + ", " + this.y + ", " + this.z + "]";
-    }
-    array() {
-      return [this.x, this.y, this.z];
-    }
-    copy() {
-      return new _Vector(this.x, this.y, this.z);
-    }
-    drawDot(color) {
-      if (!doodler) return;
-      doodler.dot(this, { weight: 2, color: color || "red" });
-    }
-    draw(origin) {
-      if (!doodler) return;
-      const startPoint = origin ? new _Vector(origin) : new _Vector();
-      doodler.line(
-        startPoint,
-        startPoint.copy().add(this.copy().normalize().mult(100))
-      );
-    }
-    normal(v) {
-      if (!v) return new _Vector(-this.y, this.x);
-      const dx = v.x - this.x;
-      const dy = v.y - this.y;
-      return new _Vector(-dy, dx);
-    }
-    static fromAngle(angle, v) {
-      if (v === void 0 || v === null) {
-        v = new _Vector();
-      }
-      v.x = Math.cos(angle);
-      v.y = Math.sin(angle);
-      return v;
-    }
-    static random2D(v) {
-      return _Vector.fromAngle(Math.random() * (Math.PI * 2), v);
-    }
-    static random3D(v) {
-      const angle = Math.random() * Constants.TWO_PI;
-      const vz = Math.random() * 2 - 1;
-      const mult = Math.sqrt(1 - vz * vz);
-      const vx = mult * Math.cos(angle);
-      const vy = mult * Math.sin(angle);
-      if (v === void 0 || v === null) {
-        v = new _Vector(vx, vy, vz);
-      } else {
-        v.set(vx, vy, vz);
-      }
-      return v;
-    }
-    static dist(v1, v2) {
-      return v1.dist(v2);
-    }
-    static dot(v1, v2) {
-      return v1.dot(v2);
-    }
-    static cross(v1, v2) {
-      return v1.cross(v2);
-    }
-    static add(v1, v2) {
-      return new _Vector(v1.x + v2.x, v1.y + v2.y, v1.z + v2.z);
-    }
-    static sub(v1, v2) {
-      return new _Vector(v1.x - v2.x, v1.y - v2.y, v1.z - v2.z);
-    }
-    static angleBetween(v1, v2) {
-      return Math.acos(v1.dot(v2) / Math.sqrt(v1.magSq() * v2.magSq()));
-    }
-    static lerp(v1, v2, amt) {
-      const val = new _Vector(v1.x, v1.y, v1.z);
-      val.lerp(v2, amt);
-      return val;
-    }
-    static vectorProjection(v1, v2) {
-      v2 = v2.copy();
-      v2.normalize();
-      const sp = v1.dot(v2);
-      v2.mult(sp);
-      return v2;
-    }
-    static vectorProjectionAndDot(v1, v2) {
-      v2 = v2.copy();
-      v2.normalize();
-      const sp = v1.dot(v2);
-      v2.mult(sp);
-      return [v2, sp];
-    }
-    static hypot2(a, b) {
-      return _Vector.dot(_Vector.sub(a, b), _Vector.sub(a, b));
-    }
-  };
-  var OriginVector = class _OriginVector extends Vector {
-    origin;
-    get halfwayPoint() {
-      return {
-        x: this.mag() / 2 * Math.sin(this.heading()) + this.origin.x,
-        y: this.mag() / 2 * Math.cos(this.heading()) + this.origin.y
-      };
-    }
-    constructor(origin, p) {
-      super(p.x, p.y, p.z);
-      this.origin = origin;
-    }
-    static from(origin, p) {
-      const v = {
-        x: p.x - origin.x,
-        y: p.y - origin.y
-      };
-      return new _OriginVector(origin, v);
-    }
-  };
-
-  // https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/canvas.ts
-  var Doodler = class {
-    ctx;
-    _canvas;
-    layers = [];
-    bg;
-    framerate;
-    get width() {
-      return this.ctx.canvas.width;
-    }
-    get height() {
-      return this.ctx.canvas.height;
-    }
-    draggables = [];
-    clickables = [];
-    dragTarget;
-    constructor({
-      width,
-      height,
-      fillScreen,
-      canvas,
-      bg,
-      framerate
-    }, postInit) {
-      if (!canvas) {
-        canvas = document.createElement("canvas");
-        document.body.append(canvas);
-      }
-      this.bg = bg || "white";
-      this.framerate = framerate;
-      canvas.width = fillScreen ? document.body.clientWidth : width;
-      canvas.height = fillScreen ? document.body.clientHeight : height;
-      if (fillScreen) {
-        const resizeObserver = new ResizeObserver((entries) => {
-          for (const entry of entries) {
-            this._canvas.width = entry.target.clientWidth;
-            this._canvas.height = entry.target.clientHeight;
-          }
-        });
-        resizeObserver.observe(document.body);
-      }
-      this._canvas = canvas;
-      const ctx = canvas.getContext("2d");
-      if (!ctx) throw "Unable to initialize Doodler: Canvas context not found";
-      this.ctx = ctx;
-      postInit?.(this.ctx);
-    }
-    init() {
-      this._canvas.addEventListener("mousedown", (e) => this.onClick(e));
-      this._canvas.addEventListener("mouseup", (e) => this.offClick(e));
-      this._canvas.addEventListener("mousemove", (e) => this.onDrag(e));
-      this.startDrawLoop();
-    }
-    timer;
-    lastFrameAt = 0;
-    startDrawLoop() {
-      this.lastFrameAt = Date.now();
-      if (this.framerate) {
-        this.timer = setInterval(
-          () => this.draw(Date.now()),
-          1e3 / this.framerate
-        );
-      } else {
-        const cb = (t) => {
-          this.draw(t);
-          requestAnimationFrame(cb);
-        };
-        requestAnimationFrame(cb);
-      }
-    }
-    draw(time) {
-      const frameTime = time - this.lastFrameAt;
-      this.ctx.clearRect(0, 0, this.width, this.height);
-      this.ctx.fillStyle = this.bg;
-      this.ctx.fillRect(0, 0, this.width, this.height);
-      for (const [i, l] of (this.layers || []).entries()) {
-        l(this.ctx, i, frameTime);
-        this.drawDeferred();
-      }
-      this.drawUI();
-      this.lastFrameAt = time;
-    }
-    // Layer management
-    createLayer(layer) {
-      this.layers.push(layer);
-    }
-    deleteLayer(layer) {
-      this.layers = this.layers.filter((l) => l !== layer);
-    }
-    moveLayer(layer, index) {
-      let temp = this.layers.filter((l) => l !== layer);
-      temp = [...temp.slice(0, index), layer, ...temp.slice(index)];
-      this.layers = temp;
-    }
-    // Drawing
-    line(start, end, style) {
-      this.setStyle(style);
-      this.ctx.beginPath();
-      this.ctx.moveTo(start.x, start.y);
-      this.ctx.lineTo(end.x, end.y);
-      this.ctx.stroke();
-    }
-    dot(at, style) {
-      this.setStyle({ ...style, weight: 1 });
-      this.ctx.beginPath();
-      this.ctx.arc(at.x, at.y, style?.weight || 1, 0, Constants.TWO_PI);
-      this.ctx.fill();
-    }
-    drawCircle(at, radius, style) {
-      this.setStyle(style);
-      this.ctx.beginPath();
-      this.ctx.arc(at.x, at.y, radius, 0, Constants.TWO_PI);
-      this.ctx.stroke();
-    }
-    fillCircle(at, radius, style) {
-      this.setStyle(style);
-      this.ctx.beginPath();
-      this.ctx.arc(at.x, at.y, radius, 0, Constants.TWO_PI);
-      this.ctx.fill();
-    }
-    drawRect(at, width, height, style) {
-      this.setStyle(style);
-      this.ctx.strokeRect(at.x, at.y, width, height);
-    }
-    fillRect(at, width, height, style) {
-      this.setStyle(style);
-      this.ctx.fillRect(at.x, at.y, width, height);
-    }
-    drawSquare(at, size, style) {
-      this.drawRect(at, size, size, style);
-    }
-    fillSquare(at, size, style) {
-      this.fillRect(at, size, size, style);
-    }
-    drawCenteredRect(at, width, height, style) {
-      this.ctx.save();
-      this.ctx.translate(-width / 2, -height / 2);
-      this.drawRect(at, width, height, style);
-      this.ctx.restore();
-    }
-    fillCenteredRect(at, width, height, style) {
-      this.ctx.save();
-      this.ctx.translate(-width / 2, -height / 2);
-      this.fillRect(at, width, height, style);
-      this.ctx.restore();
-    }
-    drawCenteredSquare(at, size, style) {
-      this.drawCenteredRect(at, size, size, style);
-    }
-    fillCenteredSquare(at, size, style) {
-      this.fillCenteredRect(at, size, size, style);
-    }
-    drawBezier(a, b, c, d, style) {
-      this.setStyle(style);
-      this.ctx.beginPath();
-      this.ctx.moveTo(a.x, a.y);
-      this.ctx.bezierCurveTo(b.x, b.y, c.x, c.y, d.x, d.y);
-      this.ctx.stroke();
-    }
-    drawRotated(origin, angle, cb) {
-      this.ctx.save();
-      this.ctx.translate(origin.x, origin.y);
-      this.ctx.rotate(angle);
-      this.ctx.translate(-origin.x, -origin.y);
-      cb();
-      this.ctx.restore();
-    }
-    drawScaled(scale, cb) {
-      this.ctx.save();
-      this.ctx.transform(scale, 0, 0, scale, 0, 0);
-      cb();
-      this.ctx.restore();
-    }
-    drawWithAlpha(alpha, cb) {
-      this.ctx.save();
-      this.ctx.globalAlpha = Math.min(Math.max(alpha, 0), 1);
-      cb();
-      this.ctx.restore();
-    }
-    drawImage(img, at, w, h) {
-      w && h ? this.ctx.drawImage(img, at.x, at.y, w, h) : this.ctx.drawImage(img, at.x, at.y);
-    }
-    drawImageWithOutline(img, at, w, h, style) {
-      this.ctx.save();
-      const s = (typeof w === "number" || !w ? style?.weight : w.weight) || 1;
-      this.ctx.shadowColor = (typeof w === "number" || !w ? style?.color || style?.fillColor : w.color || w.strokeColor) || "red";
-      this.ctx.shadowBlur = 0;
-      for (let x = -s; x <= s; x++) {
-        for (let y = -s; y <= s; y++) {
-          this.ctx.shadowOffsetX = x;
-          this.ctx.shadowOffsetY = y;
-          typeof w === "number" && h ? this.ctx.drawImage(img, at.x, at.y, w, h) : this.ctx.drawImage(img, at.x, at.y);
-        }
-      }
-      this.ctx.restore();
-    }
-    drawSprite(img, spritePos, sWidth, sHeight, at, width, height) {
-      this.ctx.drawImage(
-        img,
-        spritePos.x,
-        spritePos.y,
-        sWidth,
-        sHeight,
-        at.x,
-        at.y,
-        width,
-        height
-      );
-    }
-    deferredDrawings = [];
-    deferDrawing(cb) {
-      this.deferredDrawings.push(cb);
-    }
-    drawDeferred() {
-      while (this.deferredDrawings.length) {
-        this.deferredDrawings.pop()?.();
-      }
-    }
-    setStyle(style) {
-      const ctx = this.ctx;
-      ctx.fillStyle = style?.color || style?.fillColor || "black";
-      ctx.strokeStyle = style?.color || style?.strokeColor || "black";
-      ctx.lineWidth = style?.weight || 1;
-      ctx.textAlign = style?.textAlign || ctx.textAlign;
-      ctx.textBaseline = style?.textBaseline || ctx.textBaseline;
-    }
-    fillText(text, pos, maxWidth, style) {
-      this.setStyle(style);
-      this.ctx.fillText(text, pos.x, pos.y, maxWidth);
-    }
-    strokeText(text, pos, maxWidth, style) {
-      this.setStyle(style);
-      this.ctx.strokeText(text, pos.x, pos.y, maxWidth);
-    }
-    clearRect(at, width, height) {
-      this.ctx.clearRect(at.x, at.y, width, height);
-    }
-    // Interaction
-    mouseX = 0;
-    mouseY = 0;
-    registerDraggable(point, radius, style) {
-      if (this.draggables.find((d) => d.point === point)) return;
-      const id = this.addUIElement("circle", point, radius, {
-        fillColor: "#5533ff50",
-        strokeColor: "#5533ff50"
-      });
-      this.draggables.push({ point, radius, style, id });
-    }
-    unregisterDraggable(point) {
-      for (const d of this.draggables) {
-        if (d.point === point) {
-          this.removeUIElement(d.id);
-        }
-      }
-      this.draggables = this.draggables.filter((d) => d.point !== point);
-    }
-    registerClickable(p1, p2, cb) {
-      const top = Math.min(p1.y, p2.y);
-      const left = Math.min(p1.x, p2.x);
-      const bottom = Math.max(p1.y, p2.y);
-      const right = Math.max(p1.x, p2.x);
-      this.clickables.push({
-        onClick: cb,
-        checkBound: (p) => p.y >= top && p.x >= left && p.y <= bottom && p.x <= right
-      });
-    }
-    unregisterClickable(cb) {
-      this.clickables = this.clickables.filter((c) => c.onClick !== cb);
-    }
-    addDragEvents({
-      onDragEnd,
-      onDragStart,
-      onDrag,
-      point
-    }) {
-      const d = this.draggables.find((d2) => d2.point === point);
-      if (d) {
-        d.onDragEnd = onDragEnd;
-        d.onDragStart = onDragStart;
-        d.onDrag = onDrag;
-      }
-    }
-    onClick(e) {
-      const mouse = new Vector(this.mouseX, this.mouseY);
-      for (const d of this.draggables) {
-        if (d.point.dist(mouse) <= d.radius) {
-          d.beingDragged = true;
-          d.onDragStart?.call(null);
-          this.dragTarget = d;
-        } else d.beingDragged = false;
-      }
-      for (const c of this.clickables) {
-        if (c.checkBound(mouse)) {
-          c.onClick();
-        }
-      }
-    }
-    offClick(e) {
-      for (const d of this.draggables) {
-        d.beingDragged = false;
-        d.onDragEnd?.call(null);
-      }
-      this.dragTarget = void 0;
-    }
-    onDrag(e) {
-      const rect = this._canvas.getBoundingClientRect();
-      this.mouseX = e.offsetX;
-      this.mouseY = e.offsetY;
-      for (const d of this.draggables.filter((d2) => d2.beingDragged)) {
-        d.point.add(e.movementX, e.movementY);
-        d.onDrag && d.onDrag({ x: e.movementX, y: e.movementY });
-      }
-    }
-    // UI Layer
-    uiElements = /* @__PURE__ */ new Map();
-    uiDrawing = {
-      rectangle: (...args) => {
-        !args[3].noFill && this.fillRect(args[0], args[1], args[2], args[3]);
-        !args[3].noStroke && this.drawRect(args[0], args[1], args[2], args[3]);
-      },
-      square: (...args) => {
-        !args[2].noFill && this.fillSquare(args[0], args[1], args[2]);
-        !args[2].noStroke && this.drawSquare(args[0], args[1], args[2]);
-      },
-      circle: (...args) => {
-        !args[2].noFill && this.fillCircle(args[0], args[1], args[2]);
-        !args[2].noStroke && this.drawCircle(args[0], args[1], args[2]);
-      }
-    };
-    drawUI() {
-      for (const [shape, ...args] of this.uiElements.values()) {
-        this.uiDrawing[shape].apply(null, args);
-      }
-    }
-    addUIElement(shape, ...args) {
-      const id = crypto.randomUUID();
-      for (const arg of args) {
-        delete arg.color;
-      }
-      this.uiElements.set(id, [shape, ...args]);
-      return id;
-    }
-    removeUIElement(id) {
-      this.uiElements.delete(id);
-    }
-  };
-
-  // https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/timing/EaseInOut.ts
-  var easeInOut = (x) => x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;
-
-  // https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/timing/Map.ts
-  var map = (value, x1, y1, x2, y2) => (value - x1) * (y2 - x2) / (y1 - x1) + x2;
-
-  // https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/zoomableCanvas.ts
-  var ZoomableDoodler = class extends Doodler {
-    scale = 1;
-    dragging = false;
-    origin = {
-      x: 0,
-      y: 0
-    };
-    mouse = {
-      x: 0,
-      y: 0
-    };
-    previousTouchLength;
-    touchTimer;
-    hasDoubleTapped = false;
-    zooming = false;
-    scaleAround = { x: 0, y: 0 };
-    maxScale = 4;
-    minScale = 1;
-    constructor(options, postInit) {
-      super(options, postInit);
-      this._canvas.addEventListener("wheel", (e) => {
-        this.scaleAtMouse(e.deltaY < 0 ? 1.1 : 0.9);
-        if (this.scale === 1) {
-          this.origin.x = 0;
-          this.origin.y = 0;
-        }
-      });
-      this._canvas.addEventListener("dblclick", (e) => {
-        e.preventDefault();
-        this.scale = 1;
-        this.origin.x = 0;
-        this.origin.y = 0;
-        this.ctx.setTransform(1, 0, 0, 1, 0, 0);
-      });
-      this._canvas.addEventListener("mousedown", (e) => {
-        e.preventDefault();
-        this.dragging = true;
-      });
-      this._canvas.addEventListener("mouseup", (e) => {
-        e.preventDefault();
-        this.dragging = false;
-      });
-      this._canvas.addEventListener("mouseleave", (_e) => {
-        this.dragging = false;
-      });
-      this._canvas.addEventListener("mousemove", (e) => {
-        const prev = this.mouse;
-        this.mouse = {
-          x: e.offsetX,
-          y: e.offsetY
-        };
-        if (this.dragging && !this.dragTarget) this.drag(prev);
-      });
-      this._canvas.addEventListener("touchstart", (e) => {
-        e.preventDefault();
-        if (e.touches.length === 1) {
-          const t1 = e.touches.item(0);
-          if (t1) {
-            this.mouse = this.getTouchOffset({
-              x: t1.clientX,
-              y: t1.clientY
-            });
-          }
-        } else {
-          clearTimeout(this.touchTimer);
-        }
-      });
-      this._canvas.addEventListener("touchend", (e) => {
-        if (e.touches.length !== 2) {
-          this.previousTouchLength = void 0;
-        }
-        switch (e.touches.length) {
-          case 1:
-            break;
-          case 0:
-            if (!this.zooming) {
-              this.events.get("touchend")?.map((cb) => cb(e));
-            }
-            break;
-        }
-        this.dragging = e.touches.length === 1;
-        clearTimeout(this.touchTimer);
-      });
-      this._canvas.addEventListener("touchmove", (e) => {
-        e.preventDefault();
-        if (e.touches.length === 2) {
-          const t1 = e.touches.item(0);
-          const t2 = e.touches.item(1);
-          if (t1 && t2) {
-            const vect = OriginVector.from(
-              this.getTouchOffset({
-                x: t1.clientX,
-                y: t1.clientY
-              }),
-              {
-                x: t2.clientX,
-                y: t2.clientY
-              }
-            );
-            if (this.previousTouchLength) {
-              const diff = this.previousTouchLength - vect.mag();
-              this.scaleAt(vect.halfwayPoint, diff < 0 ? 1.01 : 0.99);
-              this.scaleAround = { ...vect.halfwayPoint };
-            }
-            this.previousTouchLength = vect.mag();
-          }
-        }
-        if (e.touches.length === 1) {
-          this.dragging === true;
-          const t1 = e.touches.item(0);
-          if (t1) {
-            const prev = this.mouse;
-            this.mouse = this.getTouchOffset({
-              x: t1.clientX,
-              y: t1.clientY
-            });
-            this.drag(prev);
-          }
-        }
-      });
-      this._canvas.addEventListener("touchstart", (e) => {
-        if (e.touches.length !== 1) return false;
-        if (!this.hasDoubleTapped) {
-          this.hasDoubleTapped = true;
-          setTimeout(() => this.hasDoubleTapped = false, 300);
-          return false;
-        }
-        if (this.scale > 1) {
-          this.frameCounter = map(this.scale, this.maxScale, 1, 0, 59);
-          this.zoomDirection = -1;
-        } else {
-          this.frameCounter = 0;
-          this.zoomDirection = 1;
-        }
-        if (this.zoomDirection > 0) {
-          this.scaleAround = { ...this.mouse };
-        }
-        this.events.get("doubletap")?.map((cb) => cb(e));
-      });
-    }
-    worldToScreen(x, y) {
-      x = x * this.scale + this.origin.x;
-      y = y * this.scale + this.origin.y;
-      return { x, y };
-    }
-    screenToWorld(x, y) {
-      x = (x - this.origin.x) / this.scale;
-      y = (y - this.origin.y) / this.scale;
-      return { x, y };
-    }
-    scaleAtMouse(scaleBy) {
-      if (this.scale === this.maxScale && scaleBy > 1) return;
-      this.scaleAt({
-        x: this.mouse.x,
-        y: this.mouse.y
-      }, scaleBy);
-    }
-    scaleAt(p, scaleBy) {
-      this.scale = Math.min(
-        Math.max(this.scale * scaleBy, this.minScale),
-        this.maxScale
-      );
-      this.origin.x = p.x - (p.x - this.origin.x) * scaleBy;
-      this.origin.y = p.y - (p.y - this.origin.y) * scaleBy;
-      this.constrainOrigin();
-    }
-    moveOrigin(motion) {
-      if (this.scale > 1) {
-        this.origin.x += motion.x;
-        this.origin.y += motion.y;
-        this.constrainOrigin();
-      }
-    }
-    drag(prev) {
-      if (this.scale > 1) {
-        const xOffset = this.mouse.x - prev.x;
-        const yOffset = this.mouse.y - prev.y;
-        this.origin.x += xOffset;
-        this.origin.y += yOffset;
-        this.constrainOrigin();
-      }
-    }
-    constrainOrigin() {
-      this.origin.x = Math.min(
-        Math.max(
-          this.origin.x,
-          -this._canvas.width * this.scale + this._canvas.width
-        ),
-        0
-      );
-      this.origin.y = Math.min(
-        Math.max(
-          this.origin.y,
-          -this._canvas.height * this.scale + this._canvas.height
-        ),
-        0
-      );
-    }
-    draw(time) {
-      this.ctx.setTransform(
-        this.scale,
-        0,
-        0,
-        this.scale,
-        this.origin.x,
-        this.origin.y
-      );
-      this.animateZoom();
-      this.ctx.fillStyle = this.bg;
-      this.ctx.fillRect(0, 0, this.width / this.scale, this.height / this.scale);
-      super.draw(time);
-    }
-    getTouchOffset(p) {
-      const { x, y } = this._canvas.getBoundingClientRect();
-      const offsetX = p.x - x;
-      const offsetY = p.y - y;
-      return {
-        x: offsetX,
-        y: offsetY
-      };
-    }
-    onDrag(e) {
-      const d = {
-        ...e,
-        movementX: e.movementX / this.scale,
-        movementY: e.movementY / this.scale
-      };
-      super.onDrag(d);
-      const { x, y } = this.screenToWorld(e.offsetX, e.offsetY);
-      this.mouseX = x;
-      this.mouseY = y;
-    }
-    zoomDirection = -1;
-    frameCounter = 60;
-    animateZoom() {
-      if (this.frameCounter < 60) {
-        const frame = easeInOut(map(this.frameCounter, 0, 59, 0, 1));
-        switch (this.zoomDirection) {
-          case 1:
-            {
-              this.scale = map(frame, 0, 1, 1, this.maxScale);
-            }
-            break;
-          case -1:
-            {
-              this.scale = map(frame, 0, 1, this.maxScale, 1);
-            }
-            break;
-        }
-        this.origin.x = this.scaleAround.x - this.scaleAround.x * this.scale;
-        this.origin.y = this.scaleAround.y - this.scaleAround.y * this.scale;
-        this.constrainOrigin();
-        this.frameCounter++;
-      }
-    }
-    events = /* @__PURE__ */ new Map();
-    registerEvent(eventName, cb) {
-      let events = this.events.get(eventName);
-      if (!events) events = this.events.set(eventName, []).get(eventName);
-      events.push(cb);
-    }
-  };
-
-  // https://git.cyborggrizzly.com/emma/doodler/raw/tag/0.1.1/init.ts
-  function init(opt, zoomable, postInit) {
-    if (window.doodler) {
-      throw "Doodler has already been initialized in this window";
-    }
-    window.doodler = zoomable ? new ZoomableDoodler(opt, postInit) : new Doodler(opt, postInit);
-    window.doodler.init();
-  }
-
-  // train.ts
-  var Train = class {
-    nodes = [];
-    cars = [];
-    path;
-    t;
-    engineLength = 40;
-    spacing = 30;
-    constructor(track, cars = []) {
-      this.path = track;
-      this.t = 0;
-      this.nodes.push(this.path.followEvenPoints(this.t));
-      this.nodes.push(this.path.followEvenPoints(this.t - this.real2Track(40)));
-      this.cars.push(new TrainCar(55, document.getElementById("engine-sprites"), 80, 20, { at: new Vector(0, 60), width: 80, height: 20 }));
-      this.cars[0].points = this.nodes.map((n) => n);
-      let currentOffset = 40;
-      for (const car2 of cars) {
-        currentOffset += this.spacing;
-        const a = this.path.followEvenPoints(this.t - currentOffset);
-        currentOffset += car2.length;
-        const b = this.path.followEvenPoints(this.t - currentOffset);
-        car2.points = [a, b];
-        this.cars.push(car2);
-      }
-    }
-    move() {
-      this.t = (this.t + 1) % this.path.evenPoints.length;
-      let currentOffset = 0;
-      for (const car2 of this.cars) {
-        if (!car2.points) return;
-        const [a, b] = car2.points;
-        a.set(this.path.followEvenPoints(this.t - currentOffset));
-        currentOffset += car2.length;
-        b.set(this.path.followEvenPoints(this.t - currentOffset));
-        currentOffset += this.spacing;
-        car2.draw();
-      }
-    }
-    // draw() {
-    //   for (const [i, node] of this.nodes.entries()) {
-    //     doodler.drawCircle(node.point, 10, { color: 'purple', weight: 3 })
-    //     // const next = this.nodes[i + 1];
-    //     // if (next) {
-    //     //   const to = Vector.sub(node.point, next.point);
-    //     //   to.setMag(40);
-    //     //   doodler.line(next.point, Vector.add(to, next.point))
-    //     // }
-    //   }
-    // }
-    real2Track(length) {
-      return length / this.path.pointSpacing;
-    }
-  };
-  var TrainCar = class {
-    img;
-    imgWidth;
-    imgHeight;
-    sprite;
-    points;
-    length;
-    constructor(length, img, w, h, sprite) {
-      this.img = img;
-      this.sprite = sprite;
-      this.imgWidth = w;
-      this.imgHeight = h;
-      this.length = length;
-    }
-    draw() {
-      if (!this.points) return;
-      const [a, b] = this.points;
-      const origin = Vector.add(Vector.sub(a, b).div(2), b);
-      const angle = Vector.sub(b, a).heading();
-      doodler.drawCircle(origin, 4, { color: "blue" });
-      doodler.drawRotated(origin, angle, () => {
-        this.sprite ? doodler.drawSprite(this.img, this.sprite.at, this.sprite.width, this.sprite.height, origin.copy().sub(this.imgWidth / 2, this.imgHeight / 2), this.imgWidth, this.imgHeight) : doodler.drawImage(this.img, origin.copy().sub(this.imgWidth / 2, this.imgHeight / 2));
-      });
-    }
-  };
-
-  // math/path.ts
-  var PathSegment = class {
-    points;
-    ctx;
-    length;
-    constructor(points) {
-      this.points = points;
-      this.length = this.calculateApproxLength(100);
-    }
-    setContext(ctx) {
-      this.ctx = ctx;
-    }
-    draw() {
-      const [a, b, c, d] = this.points;
-      doodler.drawBezier(a, b, c, d, {
-        strokeColor: "#ffffff50"
-      });
-    }
-    getPointAtT(t) {
-      const [a, b, c, d] = this.points;
-      const res = a.copy();
-      res.add(Vector.add(a.copy().mult(-3), b.copy().mult(3)).mult(t));
-      res.add(Vector.add(Vector.add(a.copy().mult(3), b.copy().mult(-6)), c.copy().mult(3)).mult(Math.pow(t, 2)));
-      res.add(Vector.add(Vector.add(a.copy().mult(-1), b.copy().mult(3)), Vector.add(c.copy().mult(-3), d.copy())).mult(Math.pow(t, 3)));
-      return res;
-    }
-    getClosestPoint(v) {
-      const samples = 25;
-      const resolution = 1 / samples;
-      let closest = this.points[0];
-      let closestDistance = this.points[0].dist(v);
-      let closestT = 0;
-      for (let i = 0; i < samples; i++) {
-        const point = this.getPointAtT(i * resolution);
-        const distance = v.dist(point);
-        if (distance < closestDistance) {
-          closest = point;
-          closestDistance = distance;
-          closestT = i * resolution;
-        }
-      }
-      return [closest, closestDistance, closestT];
-    }
-    getPointsWithinRadius(v, r) {
-      const points = [];
-      const samples = 25;
-      const resolution = 1 / samples;
-      for (let i = 0; i < samples; i++) {
-        const point = this.getPointAtT(i * resolution);
-        const distance = v.dist(point);
-        if (distance < r) {
-          points.push([i * resolution, this]);
-        }
-      }
-      return points;
-    }
-    tangent(t) {
-      const [a, b, c, d] = this.points;
-      const res = Vector.sub(b, a).mult(3 * Math.pow(1 - t, 2));
-      res.add(Vector.add(Vector.sub(c, b).mult(6 * (1 - t) * t), Vector.sub(d, c).mult(3 * Math.pow(t, 2))));
-      return res;
-    }
-    doesIntersectCircle(x, y, r) {
-      const v = new Vector(x, y);
-      const samples = 25;
-      const resolution = 1 / samples;
-      let distance = Infinity;
-      let t;
-      for (let i = 0; i < samples; i++) {
-        if (i !== samples - 1) {
-          const a = this.getPointAtT(i * resolution);
-          const b = this.getPointAtT((i + 1) * resolution);
-          const ac = Vector.sub(v, a);
-          const ab = Vector.sub(b, a);
-          const d = Vector.add(Vector.vectorProjection(ac, ab), a);
-          const ad = Vector.sub(d, a);
-          const k = Math.abs(ab.x) > Math.abs(ab.y) ? ad.x / ab.x : ad.y / ab.y;
-          let dist;
-          if (k <= 0) {
-            dist = Vector.hypot2(v, a);
-          } else if (k >= 1) {
-            dist = Vector.hypot2(v, b);
-          }
-          dist = Vector.hypot2(v, d);
-          if (dist < distance) {
-            distance = dist;
-            t = i * resolution;
-          }
-        }
-      }
-      if (distance < r) return t;
-      return false;
-    }
-    calculateApproxLength(resolution = 25) {
-      const stepSize = 1 / resolution;
-      const points = [];
-      for (let i = 0; i <= resolution; i++) {
-        const current = stepSize * i;
-        points.push(this.getPointAtT(current));
-      }
-      this.length = points.reduce((acc, cur) => {
-        const prev = acc.prev;
-        acc.prev = cur;
-        if (!prev) return acc;
-        acc.length += cur.dist(prev);
-        return acc;
-      }, { prev: void 0, length: 0 }).length;
-      return this.length;
-    }
-    calculateEvenlySpacedPoints(spacing, resolution = 1) {
-      const points = [];
-      points.push(this.points[0]);
-      let prev = points[0];
-      let distSinceLastEvenPoint = 0;
-      let t = 0;
-      const div = Math.ceil(this.length * resolution * 10);
-      while (t < 1) {
-        t += 1 / div;
-        const point = this.getPointAtT(t);
-        distSinceLastEvenPoint += prev.dist(point);
-        if (distSinceLastEvenPoint >= spacing) {
-          const overshoot = distSinceLastEvenPoint - spacing;
-          const evenPoint = Vector.add(point, Vector.sub(point, prev).normalize().mult(overshoot));
-          distSinceLastEvenPoint = overshoot;
-          points.push(evenPoint);
-          prev = evenPoint;
-        }
-        prev = point;
-      }
-      return points;
-    }
-  };
-
-  // track.ts
-  var Track = class extends PathSegment {
-    editable = false;
-    next;
-    prev;
-    id;
-    constructor(points, next, prev) {
-      super(points);
-      this.id = crypto.randomUUID();
-      this.next = next || this;
-      this.prev = prev || this;
-    }
-    // followTrack(train: Train): [Vector, number] {
-    //   const predict = train.velocity.copy();
-    //   predict.normalize();
-    //   predict.mult(1);
-    //   const predictpos = Vector.add(train.position, predict)
-    //   // const leading = train.leadingPoint;
-    //   // let closest = this.points[0];
-    //   // let closestDistance = this.getClosestPoint(leading);
-    //   let [closest, closestDistance, closestT] = this.getClosestPoint(predictpos);
-    //   // deno-lint-ignore no-this-alias
-    //   let mostValid: Track = this;
-    //   if (this.next !== this) {
-    //     const [point, distance, t] = this.next.getClosestPoint(predictpos);
-    //     if (distance < closestDistance) {
-    //       closest = point;
-    //       closestDistance = distance;
-    //       mostValid = this.next;
-    //       closestT = t;
-    //     }
-    //   }
-    //   if (this.prev !== this) {
-    //     const [point, distance, t] = this.next.getClosestPoint(predictpos);
-    //     if (distance < closestDistance) {
-    //       closest = point;
-    //       closestDistance = distance;
-    //       mostValid = this.next;
-    //       closestT = t;
-    //     }
-    //   }
-    //   train.currentTrack = mostValid;
-    //   train.arrive(closest);
-    //   // if (predictpos.dist(closest) > 2) train.arrive(closest);
-    //   return [closest, closestT];
-    // }
-    getNearestPoint(p) {
-      let [closest, closestDistance] = this.getClosestPoint(p);
-      if (this.next !== this) {
-        const [point, distance, t] = this.next.getClosestPoint(p);
-        if (distance < closestDistance) {
-          closest = point;
-          closestDistance = distance;
-        }
-      }
-      if (this.prev !== this) {
-        const [point, distance, t] = this.next.getClosestPoint(p);
-        if (distance < closestDistance) {
-          closest = point;
-          closestDistance = distance;
-        }
-      }
-      return closest;
-    }
-    getAllPointsInRange(v, r) {
-      const points = this.getPointsWithinRadius(v, r).concat(this.next.getPointsWithinRadius(v, r), this.prev.getPointsWithinRadius(v, r));
-      return points;
-    }
-    draw() {
-      super.draw();
-      if (this.editable) {
-        const [a, b, c, d] = this.points;
-        doodler.line(a, b);
-        doodler.line(c, d);
-      }
-    }
-    setNext(t) {
-      this.next = t;
-      this.next.points[0] = this.points[3];
-    }
-    setPrev(t) {
-      this.prev = t;
-      this.prev.points[3] = this.points[0];
-    }
-  };
-  var Spline = class {
-    segments = [];
-    ctx;
-    evenPoints;
-    pointSpacing;
-    get points() {
-      return Array.from(new Set(this.segments.flatMap((s) => s.points)));
-    }
-    nodes;
-    constructor(segs) {
-      this.segments = segs;
-      this.pointSpacing = 1;
-      this.evenPoints = this.calculateEvenlySpacedPoints(1);
-      this.nodes = [];
-      for (let i = 0; i < this.points.length; i += 3) {
-        const node = {
-          anchor: this.points[i],
-          controls: [this.points.at(i - 1), this.points[(i + 1) % this.points.length]],
-          mirrored: false,
-          tangent: true
-        };
-        this.nodes.push(node);
-      }
-    }
-    setContext(ctx) {
-      this.ctx = ctx;
-      for (const segment of this.segments) {
-        segment.setContext(ctx);
-      }
-    }
-    draw() {
-      for (const segment of this.segments) {
-        segment.draw();
-      }
-    }
-    calculateEvenlySpacedPoints(spacing, resolution = 1) {
-      this.pointSpacing = 1;
-      const points = [];
-      points.push(this.segments[0].points[0]);
-      let prev = points[0];
-      let distSinceLastEvenPoint = 0;
-      for (const seg of this.segments) {
-        let t = 0;
-        const div = Math.ceil(seg.length * resolution * 10);
-        while (t < 1) {
-          t += 1 / div;
-          const point = seg.getPointAtT(t);
-          distSinceLastEvenPoint += prev.dist(point);
-          if (distSinceLastEvenPoint >= spacing) {
-            const overshoot = distSinceLastEvenPoint - spacing;
-            const evenPoint = Vector.add(point, Vector.sub(point, prev).normalize().mult(overshoot));
-            distSinceLastEvenPoint = overshoot;
-            points.push(evenPoint);
-            prev = evenPoint;
-          }
-          prev = point;
-        }
-      }
-      this.evenPoints = points;
-      return points;
-    }
-    followEvenPoints(t) {
-      if (t < 0) t += this.evenPoints.length;
-      const i = Math.floor(t);
-      const a = this.evenPoints[i];
-      const b = this.evenPoints[(i + 1) % this.evenPoints.length];
-      return Vector.lerp(a, b, t % 1);
-    }
-    calculateApproxLength() {
-      for (const s of this.segments) {
-        s.calculateApproxLength();
-      }
-    }
-    toggleNodeTangent(p) {
-      const node = this.nodes.find((n) => n.anchor === p);
-      node && (node.tangent = !node.tangent);
-    }
-    toggleNodeMirrored(p) {
-      const node = this.nodes.find((n) => n.anchor === p);
-      node && (node.mirrored = !node.mirrored);
-    }
-    handleNodeEdit(p, movement) {
-      const node = this.nodes.find((n) => n.anchor === p || n.controls.includes(p));
-      if (!node || !(node.mirrored || node.tangent)) return;
-      if (node.anchor !== p) {
-        if (node.mirrored || node.tangent) {
-          const mover = node.controls.find((e) => e !== p);
-          const v = Vector.sub(node.anchor, p);
-          if (!node.mirrored) v.setMag(Vector.sub(node.anchor, mover).mag());
-          mover.set(Vector.add(v, node.anchor));
-        }
-      } else {
-        for (const control of node.controls) {
-          control.add(movement.x, movement.y);
-        }
-      }
-    }
-  };
-  var generateSquareTrack = () => {
-    const first = new Track([new Vector(20, 40), new Vector(20, 100), new Vector(20, 300), new Vector(20, 360)]);
-    const second = new Track([first.points[3], new Vector(20, 370), new Vector(30, 380), new Vector(40, 380)]);
-    const third = new Track([second.points[3], new Vector(100, 380), new Vector(300, 380), new Vector(360, 380)]);
-    const fourth = new Track([third.points[3], new Vector(370, 380), new Vector(380, 370), new Vector(380, 360)]);
-    const fifth = new Track([fourth.points[3], new Vector(380, 300), new Vector(380, 100), new Vector(380, 40)]);
-    const sixth = new Track([fifth.points[3], new Vector(380, 30), new Vector(370, 20), new Vector(360, 20)]);
-    const seventh = new Track([sixth.points[3], new Vector(300, 20), new Vector(100, 20), new Vector(40, 20)]);
-    const eighth = new Track([seventh.points[3], new Vector(30, 20), new Vector(20, 30), first.points[0]]);
-    const tracks = [first, second, third, fourth, fifth, sixth, seventh, eighth];
-    for (const [i, track] of tracks.entries()) {
-      track.next = tracks[(i + 1) % tracks.length];
-      track.prev = tracks.at(i - 1);
-    }
-    return new Spline([first, second, third, fourth, fifth, sixth, seventh, eighth]);
-  };
-
-  // main.ts
-  var engineSprites = document.createElement("img");
-  engineSprites.src = "./sprites/EngineSprites.png";
-  engineSprites.style.display = "none";
-  engineSprites.id = "engine-sprites";
-  document.body.append(engineSprites);
-  init({
-    width: 400,
-    height: 400,
-    bg: "#333"
-  });
-  var path = generateSquareTrack();
-  var speed = 1;
-  var car = new TrainCar(55, engineSprites, 80, 20, {
-    at: new Vector(0, 80),
-    height: 20,
-    width: 80
-  });
-  var train = new Train(path, [car]);
-  var dragEndCounter = 0;
-  var selectedNode;
-  doodler.createLayer(() => {
-    for (let i = 0; i < path.evenPoints.length; i += 10) {
-      const p = path.evenPoints[i];
-      const next = path.evenPoints[(i + 1) % path.evenPoints.length];
-      const last = path.evenPoints.at(i - 1);
-      if (!last) break;
-      const tan = Vector.sub(last, next);
-      doodler.drawRotated(p, tan.heading(), () => {
-        doodler.line(p, p.copy().add(0, 10), { color: "#291b17", weight: 4 });
-        doodler.line(p, p.copy().add(0, -10), { color: "#291b17", weight: 4 });
-        doodler.line(p.copy().add(-6, 5), p.copy().add(6, 5), {
-          color: "grey",
-          weight: 2
-        });
-        doodler.line(p.copy().add(-6, -5), p.copy().add(6, -5), {
-          color: "grey",
-          weight: 2
-        });
-      });
-    }
-    path.draw();
-    train.move();
-    selectedNode?.anchor.drawDot();
-    selectedNode?.controls.forEach((e) => e.drawDot());
-  });
-  var editable = false;
-  var clickables = /* @__PURE__ */ new Map();
-  var selectedPoint;
-  document.addEventListener("keyup", (e) => {
-    if (e.key === "d") {
-    }
-    if (e.key === "ArrowUp") {
-      speed += 0.1;
-    }
-    if (e.key === "ArrowDown") {
-      speed -= 0.1;
-    }
-    if (e.key === "m" && selectedPoint) {
-      const points = path.points;
-      const index = points.findIndex((p) => p === selectedPoint);
-      if (index > -1) {
-        const prev = points.at(index - 1);
-        const next = points[(index + 1) % points.length];
-        const toPrev = Vector.sub(prev, selectedPoint);
-        toPrev.setMag(next.dist(selectedPoint));
-        toPrev.rotate(Math.PI);
-        const toNext = Vector.add(toPrev, selectedPoint);
-        next.set(toNext);
-        path.calculateApproxLength();
-        path.calculateEvenlySpacedPoints(1);
-      }
-    }
-    if (e.key === "e") {
-      editable = !editable;
-      for (const t of path.segments) {
-        t.editable = !t.editable;
-        for (const p of t.points) {
-          if (t.editable) {
-            doodler.registerDraggable(p, 10);
-            doodler.addDragEvents({
-              point: p,
-              onDragEnd: () => {
-                dragEndCounter++;
-                t.length = t.calculateApproxLength(100);
-                path.evenPoints = path.calculateEvenlySpacedPoints(1);
-              },
-              onDrag: (movement) => {
-                path.handleNodeEdit(p, movement);
-              }
-            });
-          } else {
-            doodler.unregisterDraggable(p);
-          }
-        }
-      }
-      for (const p of path.points) {
-        if (editable) {
-          const onClick = () => {
-            selectedPoint = p;
-            selectedNode = path.nodes.find(
-              (e2) => e2.anchor === p || e2.controls.includes(p)
-            );
-          };
-          clickables.set(p, onClick);
-          doodler.registerClickable(
-            p.copy().sub(10, 10),
-            p.copy().add(10, 10),
-            onClick
-          );
-        } else {
-          const the = clickables.get(p);
-          doodler.unregisterClickable(the);
-        }
-      }
-    }
-  });
-  document.addEventListener("keydown", (e) => {
-    if (e.ctrlKey && e.key === "s") {
-      e.preventDefault();
-      path.segments.forEach((s) => {
-        s.next = s.next.id;
-        s.prev = s.prev.id;
-        delete s.ctx;
-      });
-      delete path.ctx;
-      const json = JSON.stringify(path);
-      localStorage.setItem("railPath", json);
-    }
-  });
-})();
diff --git a/test/contextBench.test.js b/test/contextBench.test.js
new file mode 100644
index 0000000..9f78661
--- /dev/null
+++ b/test/contextBench.test.js
@@ -0,0 +1,35 @@
+import {
+  getContextItem,
+  setDefaultContext,
+  withContext,
+} from "@lib/context.ts"; // adjust path as needed
+import { testPerformance } from "./bench.ts";
+
+Deno.test("Context Benchmark", () => {
+  console.log("Context Benchmark - run within frame time");
+  testPerformance(
+    () => {
+      setDefaultContext({ a: 1 });
+    },
+    10000,
+    60,
+  );
+
+  testPerformance(
+    () => {
+      withContext({ a: 1 }, () => {
+        getContextItem("a");
+      });
+    },
+    10000,
+    60,
+  );
+
+  testPerformance(
+    () => {
+      getContextItem("a");
+    },
+    100000,
+    240,
+  );
+});
diff --git a/track/shapes.ts b/track/shapes.ts
new file mode 100644
index 0000000..9698d3c
--- /dev/null
+++ b/track/shapes.ts
@@ -0,0 +1,14 @@
+import { Vector } from "@bearmetal/doodler";
+import { TrackSegment } from "./system.ts";
+
+export class StraightTrack extends TrackSegment {
+  constructor(start?: Vector) {
+    start = start || new Vector(100, 100);
+    super([
+      start.copy(),
+      start.copy().add(25, 0),
+      start.copy().add(75, 0),
+      start.copy().add(100, 0),
+    ]);
+  }
+}
diff --git a/track/system.ts b/track/system.ts
new file mode 100644
index 0000000..2007987
--- /dev/null
+++ b/track/system.ts
@@ -0,0 +1,124 @@
+import { Doodler, Vector } from "@bearmetal/doodler";
+import { PathSegment } from "../math/path.ts";
+import { getContextItem, setDefaultContext } from "../lib/context.ts";
+
+export class TrackSystem {
+  private segments: Map<string, TrackSegment> = new Map();
+  private doodler: Doodler;
+
+  constructor(segments: TrackSegment[]) {
+    this.doodler = getContextItem<Doodler>("doodler");
+    for (const segment of segments) {
+      this.segments.set(segment.id, segment);
+    }
+  }
+
+  draw() {
+    for (const segment of this.segments.values()) {
+      segment.draw();
+    }
+
+    try {
+      if (getContextItem<boolean>("showEnds")) {
+        const ends = this.findEnds();
+        for (const end of ends) {
+          this.doodler.fillCircle(end.pos, 2, {
+            color: "red",
+            // weight: 3,
+          });
+          if (getContextItem<boolean>("debug")) {
+            this.doodler.line(
+              end.pos,
+              end.pos.copy().add(end.tangent.copy().mult(20)),
+              {
+                color: "blue",
+                // weight: 3,
+              },
+            );
+          }
+        }
+      }
+    } catch {
+      setDefaultContext({ showEnds: false });
+    }
+  }
+
+  findEnds() {
+    const ends: { pos: Vector; segment: TrackSegment; tangent: Vector }[] = [];
+    for (const segment of this.segments.values()) {
+      const [a, b, c, d] = segment.points;
+      {
+        const tangent = Vector.sub(a, b).normalize();
+        const pos = a.copy();
+        ends.push({ pos, segment, tangent });
+      }
+      {
+        const tangent = Vector.sub(d, c).normalize();
+        const pos = d.copy();
+        ends.push({ pos, segment, tangent });
+      }
+    }
+    return ends;
+  }
+
+  serialize() {
+    return this.segments.values().map((s) => s.serialize()).toArray();
+  }
+
+  static deserialize(data: any) {
+    const track = new TrackSystem([]);
+    for (const segment of data) {
+      track.segments.set(segment.id, TrackSegment.deserialize(segment));
+    }
+    return track;
+  }
+}
+
+export class TrackSegment extends PathSegment {
+  frontNeighbours: TrackSegment[] = [];
+  backNeighbours: TrackSegment[] = [];
+
+  track?: TrackSystem;
+
+  doodler: Doodler;
+
+  id: string;
+
+  constructor(p: [Vector, Vector, Vector, Vector], id?: string) {
+    super(p);
+    this.doodler = getContextItem<Doodler>("doodler");
+    this.id = id ?? crypto.randomUUID();
+  }
+
+  setTrack(t: TrackSystem) {
+    this.track = t;
+  }
+
+  draw() {
+    this.doodler.drawBezier(
+      this.points[0],
+      this.points[1],
+      this.points[2],
+      this.points[3],
+      {
+        strokeColor: "#ffffff50",
+      },
+    );
+  }
+
+  serialize() {
+    return {
+      p: this.points.map((p) => p.array()),
+      id: this.id,
+      bNeighbors: this.backNeighbours.map((n) => n.id),
+      fNeighbors: this.frontNeighbours.map((n) => n.id),
+    };
+  }
+
+  static deserialize(data: any) {
+    return new TrackSegment(
+      data.p.map((p: [number, number, number]) => new Vector(p[0], p[1], p[2])),
+      data.id,
+    );
+  }
+}
diff --git a/ui/button.ts b/ui/button.ts
new file mode 100644
index 0000000..2c92516
--- /dev/null
+++ b/ui/button.ts
@@ -0,0 +1,39 @@
+import { Doodler, Vector } from "@bearmetal/doodler";
+import { getContext, getContextItem } from "../lib/context.ts";
+
+export function addButton(props: {
+  text: string;
+  onClick: () => void;
+  style?: {
+    color?: string;
+    fillColor?: string;
+    strokeColor?: string;
+    weight?: number;
+    noStroke?: boolean;
+    noFill?: boolean;
+  };
+  at: [Vector, Vector];
+}) {
+  const doodler = getContextItem<Doodler>("doodler");
+  const { text, onClick, style } = props;
+  const { x, y } = props.at[1].copy().sub(props.at[0]);
+  const id = doodler.addUIElement(
+    "rectangle",
+    props.at[0],
+    x,
+    y,
+    style,
+  );
+  doodler.registerClickable(props.at[0], props.at[1], onClick);
+  return {
+    id,
+    text,
+    onClick,
+    style,
+  };
+}
+
+export function removeButton(id: string, onClick: () => void) {
+  getContextItem<Doodler>("doodler").removeUIElement(id);
+  getContextItem<Doodler>("doodler").unregisterClickable(onClick);
+}