(() => {
  // 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://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;
        this.y = y;
        this.z = z;
      } else {
        this.x = x.x;
        this.y = x.y || y;
        this.z = x.z || z;
      }
    }
    initializeDoodler(doodler2) {
      this.doodler = doodler2;
    }
    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(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") {
        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.toFixed(2) + ", " + this.y.toFixed(2) + ", " + this.z.toFixed(2) + "]";
    }
    array() {
      return [this.x, this.y, this.z];
    }
    copy() {
      return new _Vector(this.x, this.y, this.z);
    }
    drawDot(color) {
      if (!this.doodler) return;
      this.doodler.dot(this, { weight: 2, color: color || "red" });
    }
    draw(origin) {
      if (!this.doodler) return;
      const startPoint = origin ? new _Vector(origin) : new _Vector();
      this.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://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;
    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 ctx2 = canvas.getContext("2d");
      if (!ctx2) throw "Unable to initialize Doodler: Canvas context not found";
      this.ctx = ctx2;
      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 = performance.now();
    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);
      }
    }
    fpsCounter = new FPSCounter();
    get fps() {
      return this.fpsCounter.getFPS();
    }
    draw(time) {
      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);
      if (frameTime > 0) {
        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 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);
      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://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://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://jsr.io/@bearmetal/doodler/0.0.3/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);
    }
  };

  // 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);
    }
    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;
    length;
    constructor(points) {
      this.points = points;
      this.length = this.calculateApproxLength(100);
    }
    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/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();
      }
      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,
                }
              );
            }
          }
        }
      } catch {
        setDefaultContext({ showEnds: false });
      }
    }
    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 });
        }
        {
          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 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
      );
    }
  };

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

  // main.ts
  var inputManager = new InputManager();
  var resources = new ResourceManager();
  var 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"
    }
  });
  var track = new TrackSystem([new StraightTrack()]);
  doodler.createLayer(() => {
    track.draw();
  });
})();